[CSS] 기본 선택자 사용하기

기본 선택자

CSS의 다양한 선택자 중에서 가장 많이 사용하는 기본 선택자를 소개합니다.
 

목차

• 전체 선택자
• 태그 선택자
• 아이디 선택자
• 클래스 선택자

전체 선택자

전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 '*' 기호를 사용해 표시합니다. 형식은 [*{...CSS 코드...}]
 
전체 선택자는 h태그, p태그를 비롯한 모든 태그에 적용됩니다.

<style>
  *{
      color:red;
  }
</style>

 

태그 선택자

태그 선택자는 HTML 태그명으로 선택자를 지정하는 방법입니다. 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한꺼번에 적용합니다. 형식은 [태그명{...CSS 코드...}

<style>
  p{
    color:blue;
  }
</style>

 

ID 선택자

아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성값을 이용하여 선택자를 지정하는 방법입니다. 이때 속성값 앞에는 '#' 기호를 붙여 구분합니다. 아이디 속성값은 고유해야 합니다. 

<style>
  #title{
    color:green;
  }
</style>

 

클래스 선택자

클래스 선택자는 HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법입니다. 이때 속성값 앞에 '.' 기호를붙입니다. 

<style>
  .red{
    color:red;
  }
  .blue{
    color:blue;
  }
</style>