CSS 선택자(Selector)

  CSS를 이용해서 HTML문서의 스타일을 적용하려면 HTML의 태그에다가 선택자라는 녀석을 적용하게 됩니다. CSS 에서는 HTML의 태그들을 선택자라는 요소로 스타일을 적용하게 됩니다. 선택자의 종류에는 크게 엘리먼트(Element), 클래스(Class), 아이디(Id) 가 있습니다. 

 직접 예를 통해서 저 세가지 요소를 설명하겠습니다.

1. 엘리먼트(Element)

- 엘리먼트 선택자는 HTML의 태그 그 자체로 스타일을 입히기 때문에 HTML 문서 상에서는 따로 해줘야할 작업은 없습니다.

- 이 코드는 CSS 상에서 모든 p태그를 blue로 Color를 변경합니다

- 이 그림을 보면 확실히 알 수가 있습니다.

 엘리먼트 선택자는 이렇게 해당 태그를 모두 스타일을 입히기 때문에 세세한 스타일 보다는 대략적인 넓은 범위의 스타일을 적용할때 사용합니다. 

2. 클래스(Class)

- 클래스 선택자는 HTML의 태그 상에서 Class 속성을 입력해줘야 하며 종류가 다른 여러 태그에 적용이 가능하다는

 특징을 가지고 있습니다.

- CSS 상에서 선택자를 적용하려면 ".클래스명" 을 적어줘야 합니다.

- 이 그림을 보시면 HTML 상에서 다른 태그라도 같은 클래스명이라면 CSS가 적용되게 됩니다. 

그리고 HTML상에서 클래스를 설정하려면 class="클래스명" 을 적어줘야 합니다.

- 이런 식으로 적용되게 됩니다.

3. 아이디(Id)

- 아이디 선택자는 HTML태그 상에서 Id 속성을 입력해줘야 하며 같은 태그라도 한 엘리먼트 에만 적용이 가능하다는 

특징을 가지고 있습니다. 

- 그림을 보면 알 수 있듯이 CSS 상에서는 "#아이디명" 으로 적용합니다.

- HTML상에서는 id="아이디명" 으로 아이디를 적용합니다.

출처 ㅣ https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/2

.