선택자

CSS 기본 문법

선택자 {
             속성명: 속성값;
}

여기서 선택자란 어떤 요소에 스타일을 적용할 것인지에 대한 정보다. 

선택자의 종류에는 기본 선택자, 그룹 선택자, 특성 선택자, 결합 선택자, 의사 클래스, 의사 요소가 있다. 

 

기본 선택자

1. 전체 선택자

모든 요소를 선택함. 

* 로 표시함.

*{
    속성명: 속성값;
}

 

2. 태그 선택자

해당 태그 요소를 모두 선택한다.

p{
   속성명: 속성값;
}

p 태그 요소 모두를 선택하여 스타일을 적용한다. 

 

3. 클래스 선택자

주어진 class 속성값을 가진 모든 요소를 선택한다. 

.title{
        속성명: 속성값;
}

문서 내 class가 "title"인 모든 요소에 스타일을 적용한다. 

 

4. 아이디 선택자

주어진 id 속성 값을 가진 요소를 선택한다.

#contents{
        속성명: 속성값;
}

문서 내 contents라는 id를 가진 요소에 스타일을 적용한다. 

 

그룹 선택자

다양한 유형의 요소를 한꺼번에 선택한다. 

h, p, div{
    속성명: 속성값;
}

문서 내 모든, h, p, div 태그 요소에 스타일을 적용한다. 

 

선택자의 우선순위

아이디 선택자 > 클래스 선택자 > 태그 선택자