기본선택자

전체 선택자 : *{}

  *{ property: value; }
  

태그는 요소라고도 부르며 전체선택자인 '*'기호는 html 문서의 모든 요소를 선택 합니다.

타입 선택자 : 요소명{} or 태그명{}

  tagName{property: value;}
  h1{property: value;}
  

  <tagName>Lorem Ipsum</tagName>
  <h1>Lorem Ipsum</h1>
  

요소명 또는 태그명과 일치 하는 모든 요소를 선택 합니다.

아이디 선택자 : #아이디명{}

  #idName{property: value;}
  

  <tag id="idName">Lorem Ipsum</tag>
  

아이디명이 요소의 id 특성의 값과 일치 하는 요소를 선택 합니다. 아이디명을 선택자로 사용할때는 #기호를 표기하여 다른 선택자와 구분 합니다.

클래스 선택자 : .클래스명{}

  .className{property: value;}
  

  <tagName class="className">Lorem Ipsum</tagName>
  

클래스명이 요소의 class 특성의 값과 일치 하는 요소를 선택 합니다. 클래스명을 선택자로 사용할때는 .기호를 표기하여 다른 선택자와 구분 합니다.

그룹 선택자 : 선택자,선택자,선택자{}

  tagNmae,.className{property: value;}
  

  <tagName class="className">Lorem Ipsum</tagName>
  <tag class="className">Lorem Ipsum</tag>
  

여러 선택자를 사용하여 선택자와 일치 하는 다수의 요소를 선택 합니다.

종속 선택자 : 요소#아이디명{} or 요소.클래스명{}

  tagName.className{property: value;}
  

  <tagName>Lorem Ipsum</tagName>
  <tag class="className">Lorem Ipsum</tag>
  

아이디선택자나 클래스선택자를 요소명과 함께 사용하는 선택자입니다. 다른 선택자 보다 우선 순위를 갖습니다.