CSS 선택자 유형 – 전체, 태그, 클래스, ID, 그룹

CSS 선택자는 웹 문서의 어떤 요소를 스타일을 적용할지 정의합니다. 다시 말해 스타일을 적용할 대상을 지정하기 위해서 선택자(selector)를 사용합니다. 선택자 중에서 꼭 알아야 되는 기본적인 선택자인 전체, 타입(태그), 클래스, ID, 그룹 선택자에 대해서 알아보죠.

▼ 선택자 유형

1. 전체 선택자
2. 타입(태그) 선택자
3. 클래스 선택자
4. ID 선택자
5. 그룹 선택자

▼ CSS 블록

1. 전체 선택자

☞ 웹 문서 전체 요소에 스타일을 적용할 때 사용합니다.

1. 소스 코드

* { 스타일 규칙 }
    
<style>
* {
     font-weight: bold;
     color: blue; 
}
</style>

2. 실행 결과

2. 타입(태그) 선택자

☞ 특정 태그를 사용하는 모든 요소에 스타일을 적용할 때 사용합니다.

1. 소소 코드

태그명 { 스타일 규칙 }
    
<style>
p {
     font-weight: bold;
     color: blue; 
}
</style>

2. 실행 결과

3. 클래스 선택자

☞ 특정 부분에 해당하는 요소들에 스타일을 적용할 때 사용합니다.

1. 소스 코드

.클래스명 { 스타일 규칙 }
    
<style>
.content {
     font-weight: bold;
     color: blue; 
}
</style>

2. 실행 결과

4. ID 선택자

☞ 특정 부분에 해당하는 하나의 요소에 스타일을 적용할 때 사용합니다.

1. 소스 코드

#아이디명 { 스타일 규칙 }
    
<style>
#content {
     font-size: large;
     font-weight: bold;
     color: blue; 
}
</style>

2. 실행 결과

5. 그룹 선택자

☞ 같은 스타일 규칙을 사용하는 요소를 묶어줄 때 사용합니다.

1. 소스 코드

선택자1, 선택자2 { 스타일 규칙 }
    
<style>
h1, p {
     color: blue; 
}
</style>

2. 실행 결과

티스토리 CSS

▼ 티스토리 CSS 적용 예시

함께 보면 좋은 게시글

• CSS 스타일과 스타일시트 적용 방법 그리고 티스토리
• CSS 결합(Combinators) 선택자 – 자손, 자식, 형제 결합자
• CSS 속성(Attribute) 선택자 정리, 7가지 종류
• CSS 가상 클래스 반응 선택자 (:hover, :active 등)
• CSS 가상 요소 선택자 사용법 (::before, ::after 등)

이 글이 도움이 되셨다면 공유 부탁 드립니다.