후손 및 자손 선택자에 대해 포스팅하겠습니다.
후손의 범위가 넓을까요? 자손의 범위가 넓을까요?
나 , 아들, 손자가 있다고 예를 들어봅시다. 나를 기준으로 설명을 할께요
나에게 아들은 자손이죠. 하지만 손자는 후손이지 자손은 아닙니다.
나에게 손자는 후손입니다. 그러나 아들 또한 후손이 될수 있습니다.
이것과 똑같은 개념이라고 할수있습니다.
후손 선택자는 특정 선택 태그안에 있는것들
자손 선택자는 특정 선택 태그 바로 아래 계층에 있는것들이라고 생각하시면 됩니다.
코드를 보시면 쉽게 이해되실껍니다.ㅎㅎ
<코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <style> #header, #wrap{ border: 2px solid #cccccc; width:200px; text-align:center; } div li{ background-color:red; } div > h2{ //자손선택자 color:green; font-size: 15px; } </style> </head> <body> <div id="header"> <div class="logo"> <h1>logo</h1> </div> </div> <div id="wrap"> <p> 오늘의 수업은 </p> <ul> <li><p>수학</p></li> <li><p>국어</p></li> <li><h2>미술</h2></li> <li><p>음악</p></li> <li><p>영어</p></li> </ul> </div> </body> </html> | cs |
div li, div > h2 중 어떤것이 후손,자손 선택자일까요?
div li : 후손 선택자 , 후손 선택자는 (스페이스바)로 나타냅니다.
div > h2 : 자손 선택자 , >은 자손선택자를 나타냅니다
id="wrap"인 태그를 div 태그를 보시면
밑에 li 태그가 있는것을 볼수 있습니다.
계층을 따져보자면 div 태그안의 ul 태그 안에 li 태그가 있는것이죠.
div가 자신이라고 가정한다면 ul 태그는 자손 ,li 태그는 손자가 되겠죠. 그러니 div li{} 의 CSS 속성이 잘 적용이 되었습니다.
하지만 h2 태그를 봅시다.
div 태그안의 ul 태그안에 h2 태그가 있습니다. 이것은 자손이 아닙니다.
그러니 div>h2의 CSS 속성을 적용할수 없습니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter11. 반응선택자와 상태선택자 CSS (0) | 2018.09.21 |
|---|---|
| [HTML/CSS] Chapter10. 동위선택자 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter8. 속성 선택자를 사용한 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter7. id(#) , class(.) 을 이용한 CSS (0) | 2018.09.15 |
| [HTML/CSS] Chapter6. 블록요소와 라인요소 (0) | 2018.09.14 |
