Naver BoostCourse Full-Stack Developer Course
Part 01 웹 프로그래밍 기초
14. CSS Selector
※ Intro
- 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 찾아야함
- 특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있음
- CSS Selector 문법은 엘리먼트를 쉽고 빠르게 찾을 수 있게 함
※ 개념
* CSS Selector
* id, class, tag selector
* nth-child
※ CSS selector
- CSS selector : HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법
<element에 style 지정을 위한 3가지 기본 선택자>
* tag로 지정
<style> span { color : red; } </style> |
* id로 지정
<style> #spantag { color : red; } </style> <body> <span id="spantag"> hello world! </span> </body> |
* class 로 지정
<style> .spanClass { color : red } </style> <body> <span class="spanClass"> hello world! </span> </body> |
※ CSS Selector 의 다양한 활용
* id, class 요소 선택자와 함께 활용
#myid { color : red } div.myclassname { color : red } |
* 그룹 선택 (여러 개 셀럭터에 같은 style 적용)
h1, span, div { color : red } h1, span, div#id { color : red } h1.span, div.classname { color : red } |
* 요소 선택 (공백) : 자손요소
* 아래 모든 span 태그에 red 색상이 적용
<div id = "young"> <div> <span> span tag </span> </div> <span> span tag2 </span> </div> |
#young span { color : red } |
* 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킴
* 아래는 span tag 2만 red 색상이 적용됨
<div id="young"> <div> <span> span tag </span> </div> <span> span tag2 </span> </div> |
#young > span { color : red } |
* n번째 자식요소를 선택 (nth-child)
* 첫번째 단락에 red 색상이 적용
<div id = "young"> <h2>단락 선택</h2> <p> 첫번째 단락입니다 </p> <p> 두번째 단락입니다 </p> <p> 세번째 단락입니다 </p> <p> 네번째 단락입니다 </p> </div> |
#young > p:nth-child(2) { color : red } |
'Etc > Naver Boost Course Web' 카테고리의 다른 글
| Part 01 웹 프로그램 언어의 기초_17 (0) | 2018.10.18 |
|---|---|
| Part 01_웹 프로그램 언어의 기초_16 (0) | 2018.10.10 |
| Part 01 웹 프로그램 언어의 기초_14 (0) | 2018.08.26 |
| Part 01 웹 프로그램 언어의 기초_13 (0) | 2018.08.26 |
| Part 01 웹 프로그램 언어의 기초_12 (0) | 2018.08.22 |
댓글