CSS Selector

• 들어가기 전에

특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야한다. 특정 엘리먼트 뿐 아니라 여러개의 엘리먼트일 수도 있다. 

• 학습 목표

1. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 분법을 이해한다.

• 핵심 개념

- CSS Selector

- id, class, tag selector

- nth-child

• CSS Selector

- HTML의 요소를 tag, id, class, html 태그 속성들을 통해 쉽게 패턴 매칭을 시켜주는 방법

- element에 style을 지정하기 위해서 세가지 기본 선택자를 사용할 수 있음

· tag : 태그 이름을 쓰면 된다. 태그 이름이 동일한 경우, 모든 태그에 적용

· id : 해당 값을 가지고있는 id에 적용

· class

· 그룹 선택 : h1, span, div.classname, div#name

· 하위 모든 요소 선택(공백) : div span

· 여러 자식 중 선택 : div > span

· n번째 자식요소를 선택(nth-child) : div > span:nth-child(2)

  →   

* 나는 About이 적용될거라고 생각했는데 nth-chlild(n)은 모든 자식들 중 n번째를 뜻하는 것..!

• 생각해보기

Q1. pseudo-class인 nth-child와 nth-of-type의 차이점은 무엇일까?

A1. nth-of-type → 자식 태그 중 기입 태그에만 순서를 정한다. / nth-child → 자식 태그 중 모든 자식태그에 끼리 순서를 정한다.