간단한 동위 선택자에 대해 알아볼께요!!
동위 선택자란? 태그의 동등한 위치를 판단하여 CSS 속성을 설정하는 선택자입니다.
동위 선택자는 + , ~ 표현이 존재합니다
~ : 나와 동급인 녀석들
+ : 나와 동급인 녀석들중 나와 바로 밑에 붙어있는 녀석
<코드>
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 | <!DOCTYPE html> <html> <head> <meta charset="EUC-KR"> <style> h3~div{ color:green; } h3+div{ color:red; } </style> </head> <body> <h3>동위 선택자 테스트</h3> <div>div1</div> <div>div2</div> <div>div3</div> <div>div4</div> </body> </html> | cs |
h3~div : h3과 같은 레벨에 있는 div 태그들은 다 포함해라는 의미를 가집니다.
h3+div : h3과 같은 레벨에 있는 div 태그중 h3 바로 밑에 있는 태그를 의미합니다.
<결과>
'프로그래밍 강의 > HTML 과 CSS' 카테고리의 다른 글
| [HTML/CSS] Chapter11. 반응선택자와 상태선택자 CSS (0) | 2018.09.21 |
|---|---|
| [HTML/CSS] Chapter9. 후손 및 자손 선택자 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 |
