CSS 셀렉터는 HTML 요소를 선택해 스타일을 적용할 때 사용하는 중요한 개념입니다. 셀렉터는 우리가 지정한 특정 조건에 맞는 HTML 요소를 찾아 그 요소에 스타일을 적용하게 됩니다. 이 중에서도 가장 기본적인 셀렉터로 타입 셀렉터, 클래스 셀렉터, ID 셀렉터가 있습니다. 각 셀렉터는 서로 다른 방식으로 HTML 요소를 선택하며, 각각의 특징을 잘 이해하는 것이 중요합니다.
1. 타입 셀렉터 (Type Selector)
타입 셀렉터는 HTML 요소의 태그 이름을 사용하여 해당 태그를 가진 모든 요소에 스타일을 적용합니다. 예를 들어, <p> 태그를 가진 모든 문단에 특정 스타일을 적용하고 싶다면, 타입 셀렉터를 사용합니다.
예시
p {
color: blue;
font-size: 16px;
}위 코드에서는 페이지에 있는 모든 <p> 태그의 글자 색상을 파란색으로, 글자 크기를 16px로 지정합니다. 타입 셀렉터는 가장 기본적이고 널리 사용되는 셀렉터 중 하나로, 페이지 내 특정 태그에 일괄적으로 스타일을 적용할 때 유용합니다.
2. 클래스 셀렉터 (Class Selector)
클래스 셀렉터는 HTML 요소의 class 속성을 기준으로 스타일을 적용합니다. 클래스는 여러 요소에 동일한 스타일을 적용할 때 사용되며, 하나의 요소에 여러 개의 클래스를 지정할 수도 있습니다. 클래스 셀렉터는 태그 이름 앞에 점(.)을 붙여서 사용합니다.
예시
.blue-text {
color: blue;
}HTML:
<p class="blue-text">이 문장은 파란색입니다.</p>
<span class="blue-text">이 스팬도 파란색입니다.</span>위 코드에서는 class="blue-text" 속성을 가진 모든 요소에 글자 색상을 파란색으로 지정합니다. 클래스 셀렉터는 한 페이지에서 여러 요소에 동일한 스타일을 적용할 수 있어 유용합니다.
3. ID 셀렉터 (ID Selector)
ID 셀렉터는 HTML 요소의 id 속성을 기준으로 스타일을 적용합니다. ID는 각 요소에 고유해야 하며, 한 페이지에서 하나의 요소에만 적용됩니다. ID 셀렉터는 태그 이름 앞에 샵(#)을 붙여서 사용합니다.
예시
#header {
background-color: #f4f4f4;
text-align: center;
}HTML:
<div id="header">
<h1>헤더 영역</h1>
</div>위 코드에서는 id="header" 속성을 가진 요소에 배경색과 텍스트 정렬 스타일을 적용합니다. ID 셀렉터는 특정한 단일 요소에 스타일을 지정할 때 사용되며, 다른 요소들과의 구분을 명확히 할 수 있습니다.
4. 타입, 클래스, ID 셀렉터의 차이점
- 타입 셀렉터는 같은 HTML 태그를 사용하는 모든 요소에 스타일을 적용합니다. 예를 들어, 모든 <h1> 태그에 동일한 스타일을 적용할 때 사용됩니다.
- 클래스 셀렉터는 여러 요소에 동일한 스타일을 적용할 수 있으며, 동일한 페이지에서 여러 번 사용이 가능합니다.
- ID 셀렉터는 고유한 ID를 가진 하나의 요소에만 스타일을 적용할 때 사용되며, 페이지 내에서 한 번만 사용할 수 있습니다.
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 셀렉터 예시</title>
<style>
/* 타입 셀렉터 */
p {
color: green;
}
/* 클래스 셀렉터 */
.blue-text {
color: blue;
}
/* ID 셀렉터 */
#header {
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<!-- ID 셀렉터 -->
<div id="header">
<h1>헤더 영역</h1>
</div>
<!-- 타입 셀렉터 -->
<p>이 문장은 녹색입니다.</p>
<!-- 클래스 셀렉터 -->
<p class="blue-text">이 문장은 파란색입니다.</p>
<!-- 클래스 셀렉터 -->
<span class="blue-text">이 스팬도 파란색입니다.</span>
</body>
</html>참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 7. float와 clear (0) | 2024.09.17 |
|---|---|
| [CSS] 6. 박스 모델 (Margin, Padding, Border, Content) (2) | 2024.09.16 |
| [CSS] 5. 우선순위와 상속 (0) | 2024.09.15 |
| [CSS] 4. 속성(Property)과 값(Value) (0) | 2024.09.14 |
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |
| #6 HTML 태그 (0) | 2024.08.25 |
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |