[ CSS ] 후손 선택자와 자손 선택자

 

[ CSS 후손 선택자와 자손 선택자 ]

 

 

 

코드를 작성하다 보면 

태그가 태그를 계속 감싸게 된다. 

 

 

기본 적으로 html 태그 안에 head 들어가 있고 

또 head 태그 안에 title 태그가 들어가 있다. 

 

 

이렇게 안에 들어가 있는 태그를 

css에서 디자인 하기 위해서는

태그 안에 태그를 계속 적어주는 방법으로 디자인을 하던지

태그 안에 들어있는 특정한 태그를 콕 찝어서 디자인을 하던지

그것도아니면 id선택자나 class선택자로 이름을 부여해서 디자인을 해줘야 한다. 

 

 

자손 선택자란?

 

 

<p><span></span></p>

 

 

예를 들기 위해서 p태그 안에 span태그를 입력했다. 

 

p태그가 span 태그를 묶어주고 있기 때문에

 

p태그를 부모

span태그를 자손 (자식과 후손) 이라고 한다.

 

 

css에서 p 태그의 자손선택자인 span 태그를 디자인 하고 싶다면

 

p > span 

 

 

위와 같이 > 기호를 입력해서 p 태그 안에 있는 span 태그를 선택해서 디자인 할 수 있다. 

 

 

 

자손 선택자 예제

 

 

<style>

                          section > ul > li > a{

                                   background: red;

}

</style>

 

section 안에 있는 a 태그 중에 

첫번째 a 태그에 배경색을 빨간색으로 주고 싶을 때 

위와 같이 section > ul > li > a 적어주면 

a 태그에 배경색을 줄 수 있다. 

 

 

이렇게 안으로 안으로 연결해서 들어가면

a 태그에 이름을 부여하지 않아도 디자인이 가능하다. 

 

 

중간에 연결되는 태그가 하나라도 빠지면 제대로 구현이 안될 수 있으니

후손선택자를 줘서 디자인을 하려면 빠짐없이 나열해줘야 한다. 

 

 

section의 후손은 ul

ul의 후손은 li

li의 후손은 a

 

 

section > ul > li > a { background : red;}

 

 

만약에 li에 디자인 효과를 넣고 싶으면, 

section > ul > li { background; red;}

 

 

ul에 배경색을 넣고 싶다면, 

section > ul{ background: red;}

 

 

 

후손 선택자

 

 

 

후손선택자는 

조상과 후손을 생각하면 된다. 

 

 

아까 자손은 부모 바로 아래에 있는 자식과 후손을 뜻하기 때문에 

하나하나 아래로 내려가서 태그를 적어줬다면, 

 

 

후손선택자는 아주 멀리 떨어져 있는 여러 세대가 지난뒤의 자녀이기 때문에

기호 > 로 연결연결해서는 끝이 없을 수도 있다. 

 

 

그렇기 때문에 만약 section 안에 a 태그가 하나뿐이라면 

 

section a{}

섹션태그 띄어쓰기한번 에이태그

 

 

이렇게 띄어쓰기를 한번 넣어줌으로써 중간에 자손선택자를 생략하고 적어도

디자인이 가능하다. 

 

 

 

후손 선택자 예제

 

 

<style>

            section a{

                               background:red;

}

</style>

 

 

section과 a 사이에 띄어쓰기를 한번 해줌으로써

후손선택자 a 태그에 빨간색 배경이 들어간 걸 확인할 수 있다. 

 

 

근데 이미지를 보면, 

자손선택자와는 다르게 a태그 두개 모두 빨간색 배경이 들어간 걸 볼 수 있다. 

 

 

띄어쓰기를 해서 후손선택자를 써줄 경우

모든 후손선택자가 선택되기 때문에 

두 글자 모두 빨간색 배경이 들어간 것이다. 

 

 

특정한 a태그에만 효과를 주고 싶다면,

자손선택자를 사용하던지 

디자인을 주고 싶은 태그에 id선택자나 class선택자로 이름을 부여해서

디자인을 해주면 된다. 

 

 

글이 쓰다보니 너무 길어졌는데, 

글자의 뜻을 생각해보고 

css에 작성하는 방법만 익히면 생각보다 쉽다. 

 

 

무엇보다도 지금 이해 안된다고 해도 

계속 사용하다보면 이해된다. 

 

 

뭐든 반복이 중요하다. 꾸준히 반복해서 학습하다보면 익혀진다.