CSS 선택자

HTML 요소를 선택해서 꾸미려면, HTML 요소를 선택하는 방법을 알아야 하는데요. 이번시간에는 HTML 요소를 선택하는 방법인 "선택자(Selector)"에 대해 알아보도록 하겠습니다.

• CSS 선택자 - CSS 규칙을 적용할 요소를 정의.

  /*
  	h1 Selector
  	h1 이라는 태그 유형으로 요소를 선택함
  */
  h1 {
  	color: blue;
  }
  

기본 선택자

전체 선택자 (Universal selector)

모든 요소를 선택합니다.

• 문법

  *

• 예제

  /* 모든 요소를 선택함. */
  * {
  	margin: 0;
  	padding: 0;
  }
  

• 용도 - 전체 선택자는 브라우저 기본 스타일을 초기화 하려고 할 때 자주 사용합니다.

타입 선택자 (Type selector)

특정 태그 이름을 가진 모든 요소를 선택합니다.

• 문법

  tagname

• 예제

  /* 태그명이 h1인 요소를 모두 선택함. */
  h1 {
  	color: blue;
  }
  

클래스 선택자 (Class selector)

주어진 class명을 가진 모든 요소를 선택합니다.

• 문법

  .classname

• 예제

  /* class에 title을 갖고 있는 모든 요소를 선택함. 예) <h1 class="title"> */
  .title {
  	color: blue;
  }