🍁shadow 그림자 효과는 텍스트와 상자에 줄 수 있다. 그림자 효과를 적당히 주게 되면 요소 간에 더욱 명확하게 구분 지어 보이게 할 수 있다. 1. text-shadow x y blur color 값을 부여한다. x, y는 그림자 방향, blue 효과는 뿌옇게 만드는 것을 의미하며, color는 그림자의 색깔이다. 숫자가 작을수록 광원이 작아진다고 생각하면 된다. 상자1 상자2 상자3 텍스트에 붙는 그림자이기 때문에 text-shadow라고 한다. 2. box-shadow x y blur color 값을 부여한다. #box2 { box-shadow: 2px 2px 3px #999; } box-shadow는 텍스트가 아닌 박스 자체에 그림자가 생긴다. 🍁shadow 활용 Box Shadow CSS G..
🍁전후 선택자 전후 선택자는 선택한 요소의 앞/뒤에 추가로 내용을 생성하는 역할을 한다. 지금까지 봐 온 first-child 같은 것들은 가상 클래스이다. 그리고 ::before는 가상 요소이다. 1. ::before = :before 2. ::after = :after 전후 선택자는 콜론이 하나가 아니라 2개를 쓴다. 콜론을 하나로 적어도 동작은 하지만 그럼에도 2개로 적는 이유는 성질을 확실하게 하기 위해서이다. 가상 요소 추가 Lorem ipsum dolor sit amet consectetur adipisicing elit. At laudantium vitae sit fugit aliquid recusandae rerum reiciendis unde nisi quisquam, ullam nequ..
🍁가상 클래스 가상 클래스의 특정 속성을 이용하여 컨트롤의 상황만을 콕 집어서 선택할 수 있다. 디자인을 재정의해서 required, readonly, disabled의 생김새에 차이가 나지 않게 했다. required, optional input[type=text]:required { background-color: gold } input[type=text]:optional { background-color: gray; } required와 optional은 짝꿍이다. 입력이 필수값(required)인 경우와 optional인 경우를 골라내어 서식을 적용할 수 있다. disabled, enabled input[type=text]:disabled { background-color: cornflowerbl..
🍁속성 선택자 속성 이름이나 속성 값으로 태그를 찾을 수 있다. [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스 (Pseudo Class)에서 이어진다. 1. 선택자[속성명] 네이버 예스24 다음 11번가 아이작의 블로그 a[target]은 a를 사용한 모든 target을 찾아서 서식을 적용한다. target은 해당 속성을 보..
🍁가상 클래스 [CSS] CSS Seletor (CSS 선택자) 2 🍁선택자 1. 전체 선택자: * {} 2. 태그 선택자: tag {} 3. ID 선택자: #id {} 4. class 선택자: .class {} 5. 그룹 선택자: sel1, sel2, sel3 {} 6. 자식 선택자: parent > child {} 7. 자손 선택자: parent child {} 8. 인접 형제 isaac-christian.tistory.com 의사 클래스(Pseudo Class)에서 이어진다. 1. :first-child 목록 사과 귤 바나나 포도 복숭아 파인애플 참외 망고 수박 딸기 first-child는 앞의 대상이 자신의 그룹 내에서 첫 번째 자식인지를 묻는다. 목록 태그의 첫 번째 자식인 사과만을 선택한다. ..
🍁 태그의 수평 정렬 인라인 태그 vs 블럭 태그의 정렬을 비교해 보도록 하자. [HTML] 인라인 태그와 블럭 태그 📌인라인 태그와 블럭 태그 모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다! 예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다. isaac-christian.tistory.com 인라인 태그와 블럭 태그에 대해서는 위 글을 참고한다. 태그의 수평 정렬 인라인 태그 인라인 태그 블럭 태그 블럭 태그 위 코드를 이용하여 정렬을 구현해 보도록 하자. 1. 내용물의 정렬 내용물의 정렬은 text-align으로 구현한다. text-align은 블럭 태그에만 사용한다. 인라인 태그 #span1{ text-align: center; } 인라..
🍁position position은 요소의 위치를 지정하는 기능이다. 태그의 위치를 지정하는 방법 1. padding > 부모가 자식의 위치를 정한다. 2. margin > 스스로 위치를 지정한다. 3. position > 정석 (CSS1 ~ CSS3) 4. transform > 정석 (CSS3) 어떤 태그를 어떤 위치에 지정을 하고 싶을 때 사용할 수 있는 여러 가지 방법이 있다. 이때 정석은 position을 사용하는 방법이다. position의 특징 position은 좌표값을 사용하여 위치를 지정한다. 좌표를 x, y라고 부르지 않고, left(x), top(y)이라고 부른다. 좌표를 지정하는 방식으로 여러 개를 제공한다. 좌표가 유효하려면 기준점이 어딘지를 알아야 하는데, 원점(기준점)이 다양하기..
🍁CSS 초기화 작업 문자열입니다. 제목입니다. 문자열입니다. 문단입니다. 문자열입니다. 영역입니다. 문자열입니다. , , 태그 셋 다 padding은 없다. 그런데 태그와 태그에는 우리가 주지 않은 margin이 있다. 이처럼 기본적으로 모든 태그들은 서식을 가지고 있다. 이러한 브라우저의 기본 설정을 없애는 작업을 해보도록 하자. user agent stylesheet user agent stylesheet는 브라우저가 준 서식이다. 즉, 이 서식은 다른 브라우저에서 보면 값이 바뀌어서 다르게 화면이 보일 수 있음을 의미한다. 개발자 입장에서는 어떤 브라우저에서 보던 똑같은 화면이면 좋겠지만, 브라우저마다 CSS를 바꿔놓기 때문에 이를 통제하는 기능을 사용하곤 한다. 1. Reset CSS https..
