강의목표

• 선택자의 종류와 사용법
• 적절한 선택자를 선택하는 법

선택자의 분류

• 단순 선택자
• 복합 선택자
• 가상 클래스 선택자

단순 선택자

• 타입 선택자

  p {
  	color: red;
  }
  

• 아이디 선택자

  //<p id="goorm">마피아</p>
  #goorm {
  	background-color: blue;
  }
  

• 클래스 선택자

  //<p class="mafia">마피아</p>
  .mafia {
  	color: white;
  	background-color: black;
  }
  .citizen {
  	color: white;
  	background-color: green;
  }
  

• 전체 선택자

  * {
  	color: yellow;
  }
  

• 속성 선택자

  • 다른 선택자에 [ ]를 통해서 특정 속성을 지정할 수 있다.
  • 여기서 대괄호( [] )는 태그가 아닌 선택자이다.

  선택자[속성명="속성값"] {
  	color: red;
  }
  

복합 선택자

• 부모와 자식이라는 개념이 있다.