저번에 기본선택자에 이어서 계층선택자와 가상선택자를 공부하도록 하겠습니다 (*ㅁ*)
앞서 말씀드렸다시피 웹페이지의 디자인을 의도한대로 나타나게 하기 위해서는 알맞는 선택자를 쓰는 것이 중요합니다.
계층선택자 및 가상선택자는 특정 조건을 만족하는 정확한 태그를 찾도록 도와줄 것입니다.
계층선택자
HTML 문서는 태그끼리 트리형태의 계층구조를 띕니다. 부모 태그 아래에 여러 자식 태그가 있고 그 자식 아래에 손자가 있는....
계층선택자는 이런 복잡한 계층 구조 속에서 원하는 태그를 찾는 방법입니다.
계층선택자에서는 자식선택자와 형제선택자로 나눌 수 있습니다.
먼저 자식선택자는 태그 아래에 직계 자식만을 선택합니다. 부모태그 > 자식태그 {...} 와 같은 형태로 '<'를 이용하여 자식선택자를 사용한나든 것을 명시합니다.
반면 자식의 자식 등 그 후손 태그들을 모두 선택할 수 있는 방법도 있습니다. 부모태그 자식태그 {...} 와 같은 형태로 부모와 후손 사이를 공백으로 구분하면 사용할 수 있습니다.
형제선택자의 경우에는 HTML 문서의 트리 계층에서 같은 레벨에 있는 형제 태그를 선택합니다. 자식선택자는 수직으로 태그들을 탐색하는 반면 형제선택자는 수평으로 탐색하는 것이 차이점입니다.
태그A + 태그B {...} 와 같이 '+를 키워드로 쓰면 A태그 바로 뒤의 B태그 하나만 선택한다는 의미입니다. 반면 태그A ~ 태그B {...}는 A태그 뒤에 모든 B태그를 선택한다는 의미가 됩니다. 이때는 '~'를 키워드로 사용합니다.
|
|||
가상선택자
가상선택자는 id, class, tag 등과 같이 HTML 문서에 실존하는 대상과 직접적으로 대응되지는 않지만 조건에 의해 일치하는 요소를 골라내는 선택자입니다. 가상의 논리적인 필터를 통해 스타일링할 대상을 찾습니다.
가상선택자는 사용시에 ':'나 '::'를 붙여서 사용합니다. (id의 #과 class의 . 과 같은 의미)
tag:first-child tag:last-child tag:nth-child(n) tag:nth-last-child(n)으로 사용할 수 있습니다.
nth-child 에서는 (an + b)와 같이 수열로도 사용할 수 있습니다. 이 때 주의할 점은 기호는 n만 가능합니다(m, x 등 안되요!)
단, child 선택자는 태그들의 순서만 보기 때문에 예상치 못한 결과가 나올 수 있다.
예시!
li:first-child{background-color : black} : li의 첫번째 child 태그의 배경색을 black으로 만듭니다.
li:last-child{background-color : red} : li의 마지막 child 태그의 배경색을 red로 만듭니다.
li:nth-child(3){background-color : yellow} : li의 child 태그 중 3번째 자식태그 배경색을 yellow로 만듭니다.
li:nth-last-child(3){background-color : blue} : li의 child 태그 중 마지막에서 3번째 자식태그의 배경색을 blue로 만듭니다.
li:nth-child(2n){color : green} : li의 child 태그 중 짝수번째 자식태그마다 배경색을 green으로 만듭니다.
반면, tag:first-of-type, tag:last-of-type, tag:nth-of-type(n), tag:nth-last-of-type(n)은 특정 타입을 정해 특정 타입을 기준으로 순서를 파악하여 선택합니다.
그 밖에도 다음과 같은 가상선택자들이 있습니다.
:only-child는 부모의 자식이 자신 혼자인 태그를 선택합니다.
:only-of-type은 혼자 있는 특정 타입의 태그를 찾습니다. 자식이 여러개 있더라도 해당 타입의 태그가 하나만 있다면 선택됩니다.
:empty는 아무 자식을 가지지 않는 빈태그를 가르킵니다. 심지어는 공백조차도 없어야 합니다.
