Web11 :: CSS Selector
해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다.
* CSS Selector
들어가기 전에
특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 합니다.
특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있습니다.
엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보겠습니다.
학습 목표
- 기본적인 Selector 문법을 이해한다.
*CSS Selector
트리 구조로 되어있는것을 빠르게 찾아가는 방법이다.
id는 document, 즉 html 페이지에 하나만 쓰는것이 좋다. 유니크 한것.
공백으로 하면 하위에 있는 요소들을 선택할 수가 있다.
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="jisu"> <div> <span> span tag </span> </div> <span> span tag 2 </span> </div>#jisu span { color : red }- 자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
- 아래는 span tag 2만 red 색상이 적용됩니다.
<div id="jisu"> <div> <span> span tag </span> </div> <span> span tag 2 </span> </div>#jisu > span { color : red }- n번째 자식요소를 선택합니다. (nth-child)
- 첫번째 단락에 red 색상이 적용됩니다.
<div id="jisu"> <h2>단락 선택</h2> <p>첫번째 단락입니다</p> <p>두번째 단락입니다</p> <p>세번째 단락입니다</p> <p>네번째 단락입니다</p> </div>#jisu > p:nth-child(2) { color : red }
- pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
nth-child 는 같은 형제(같은 태그), 다른 형제(다른태그) 구분없이 순서를 세고요,
nth-of-type는 다른 형제는 아예 빼고 자기형제들만 세요
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
'Web' 카테고리의 다른 글
| Web13 :: Element가 배치되는 방법(CSS layout) (0) | 2019.01.06 |
|---|---|
| Web12 :: CSS 기본 Style 변경하기 (0) | 2019.01.06 |
| Web10 :: 상속과 우선순위 결정 (0) | 2019.01.06 |
| Web09 :: CSS 선언 방법 (0) | 2019.01.04 |
| Web08 :: class 와 id (0) | 2019.01.04 |