선택자

선택자란?

 

CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용합니다.

 

대표적인 선택자는 다음과 같습니다.

 

- 전체 선택자

- HTML 요소 선택자

- 아이디(id) 선택자

- 클래스(class) 선택자

- 그룹(group) 선택자

 

사용방법은 다음과 같습니다.

 

* {                전체 선택자

}

태그이름{           HTML 요소 선택자

}


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

}


#id명{              id 선택자

}


a, b, c{            그룹 선택자

}

 

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택합니다.

 

<style>

    * { color: red; }

</style>

 

 

HTML 요소 선택자

HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.

 

<style>

    h1 { 
    color: red; 
    text-align: center; 
    }
    
</style>

 

 

 

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.

 

원칙적으로 하나의 객체에만 적용할 수 있습니다.

 

# 을 맨앞에 붙여 사용합니다. 

 

<style>
  #heading{
  	color:blue;
  }
</style>

<h4 id="heading"></h4>

 

 

 

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.

 

. 을 맨앞에 붙여 사용합니다. 

 

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

<h4 class="name"></h4>

 

 

그룹 선택자

그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결합니다.

 

<style>

	h1, h2, h4{
    	color : red;
    }
    
</style>

 

id 선택자와 class 선택자의 차이

클래스 : 같은 그룹끼리 사용할 수 있습니다. -> 중복가능

id : 하나의 고유한 id로 사용해야 합니다. -> 중복불가능