• 들어가기 전에 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 합니다. 특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있습니다. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보겠습니다.

---

1. 기본적인 Selector 문법을 이해한다.

• CSS Selector
• id, class, tag, selector
• nth-child

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다.

• tag로 지정하기 `

<style> span { color : red; } </style>

`

• id로 지정하기 `

<style> #spantag { color : red; } </style> HELLO World! ` - class로 지정하기 ` <style> .spanClass { color : red } </style> HELLO World! `

• 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 색상이 적용됨 `

` ` #jisu span { color : red } ` - 자식 선택(>) : 자식은 바로 하위엘리먼트를 가리킵니다. - 아래는 span tag 2만 red 색상이 적용됩니다. ` ` ` #jisu > span { color : red } ` - n번째 자식요소를 선택합니다.(nth-child) - 첫번쨰 단락에 red 색상이 적용됩니다. ` ` ` #jisu > p:nth-child(2) { color : red } `

1. pseudo-class인 nth-child와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.