이를 정리한 이유는 역시나 프론트엔드웹을 다룰때 기본적으로 알고 있어야하는, 알고있어야 이해가 되는 내용이다. 외우진 않더라도 알고만 있자.(그게 그거아닌가?..)
기본선택자
1. 전체 선택자(Universal selector)
html 내의 모든 요소(내용)을 선택합니다.
* {
font-size:50px;
}2. 태그 선택자(Type selector)
태그로 요소를 선택합니다.
div {
font-size:50px;
}
span {
font-size:50px;
}
p {
font-size:50px;
}3. 클래스 선택자(Class selector)
html에서 attribute(속성)을 지정해준(class="~~") 요소를 선택합니다.
이때 꼭 앞에 '.'을 붙여주어야 합니다.
.index {
font-size:50px;
}
.~~ {
font-size:50px;
}4. ID 선택자(ID selector)
html 문서의 id 속성 값으로 요소를 선택합니다.
이때 꼭 앞에 '#'을 붙여주어야 합니다.
#myidisid {
font-size:50px;
}복합 선택자(Combinators)
복합 선택자는 기본 선택자들을 조합하여 사용합니다.
1. 일치 선택(Basic Combinator)
기본 선택자들을 붙여 작성합니다.
p.index { /*p태그이면서 class="index"인 모든 요소*/
font-size:50px;
}위의 예는 html문서에서 <p>태그를 가지면서 class="index"인 요소를 선택합니다.
혹여나 p.index가 아닌 .indexp 로 작성할 경우 class="indexp"인 요소를 찾게 되므로 원치 않는 결과가 발생할 수 있습니다.
2. 자식 선택(Child Combinator)
기본 선택자들 사이에 '>'를 사용합니다.
-의 자식 요소 중 -를 선택
div > span {/*div의 자식요소중 span태그 선택*/
font-size: 50px;
}위에서는 div태그의 요소를 부모로 갖고 있는 모든 span태그를 선택합니다.
3. 자손(후손) 선택자(Descendant Combinator)
기본 선택자 사이에 '띄어쓰기(공백)'을 사용합니다.
이때 자손(후손)이란 특정 요소 이하의 모든 요소를 뜻합니다.
div .index {/*div의 후손(자손) 중 class="index"인 후손 모두 선택*/
font-size: 50px;
}위에선 div태그의 요소의 class="index"인 후손들을 모두 선택합니다.
(부모, 부모의 부모, 부모의 부모의 부모, 부모의 ...... 이 div태그의 요소이면 됩니다.)
4. 인접 형제 선택자(Adjacent Sibling Combinator)
선택자들 사이에 '+'기호를 사용합니다.
이때 형제는 같은 부모요소를 공유하는 요소들을 말합니다.
div + .index {/*div 태그에 가장 인접한 class="index"인 요소 중 바로 다음 요소 하나 선택*/
font-size: 50px;
}div 태그에 가장 인접한 class="index"인 요소 중 바로 다음 요소 하나를 선택합니다.
5. 일반 형제 선택자(General Sibling Combinator)
선택자들 사이에 '~'기호를 사용합니다.
div ~ .index {/*div 태그에 가장 인접한 class="index"인 요소 중 바로 다음 요소 모두 선택*/
font-size: 50px;
}div 태그에 가장 인접한 class="index"인 요소 중 바로 다음 요소 모두를 선택합니다.
