-
Part 01 웹 프로그램 언어의 기초_15Study/Naver Boost Course Web 2018. 9. 4. 02:15반응형
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 }
반응형'Study > 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