반응형
CSS selector
HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.
- tag로 설정하기(태그명)
1 2 3 4 5 | <style> span { color : red; } </style> | cs |
- class로 설정하기(.class이름)
1 2 3 4 5 6 7 8 9 | <style> .spanClass { color : red } </style> <body> <span class="spanClass"> HELLO World! </span> </body> | cs |
- id로 설정하기(#id이름)
1 2 3 4 5 6 7 8 9 | <style> #spantag { color : red; } </style> <body> <span id="spantag"> HELLO World! </span> </body> | cs |
CSS Selector의 다양한 활용
id, class 요소 선택자와 함께 활용
1 2 | #myid { color : red } div.myclassname { color : red } | cs |
그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
1 2 3 | h1, span, div { color : red } h1, span, div#id { color : red } h1.span, div.classname { color : red } | cs |
요소 선택 (공백) : 자손요소
아래 모든 span태그에 red색상이 적용됨
1 2 3 4 5 6 7 8 9 10 11 12 | <style> #jisu span { color : red } </style> <div id="jisu"> <div> <span> span tag </span> </div> <span> span tag 2 </span> </div> | cs |
자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
아래는 span tag 2만 red 색상이 적용됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <style> #jisu > span { color : red } </style> <div id="jisu"> <div> <span> span tag </span> </div> <span> span tag 2 </span> </div> |
n번째 자식요소를 선택합니다. (nth-child)
첫번째 단락에 red 색상이 적용됩니다.
자식의 n번째 태그에 적용 p에 n번째아님!!!
1 2 3 4 5 6 7 8 9 10 11 | <style> #jisu > p:nth-child(2) { color : red } </style> <div id="jisu"> <h2>단락 선택</h2> <p>첫번째 단락입니다</p> <p>두번째 단락입니다</p> <p>세번째 단락입니다</p> <p>네번째 단락입니다</p> </div> | cs |
반응형
'웹개발 > 부스트코스(웹프로그래밍)' 카테고리의 다른 글
| css라이브러리 (0) | 2018.12.15 |
|---|---|
| CSS 기본 Style 변경하기 (0) | 2018.12.15 |
| HTML (0) | 2018.12.14 |
| css 선언방법 (0) | 2018.12.14 |
| Class와 id 속성 (0) | 2018.12.14 |
최근댓글