# [CSS Selector 기초 강좌] 1편. CSS 선택자 개요 및 기본 선택자
안녕하세요! CSS 선택자 기초 강좌의 첫 회차에 오신 것을 환영합니다. 오늘은 CSS 선택자의 개요와 기본 선택자에 대해 알아보겠습니다. CSS(스타일 시트 언어)는 웹 페이지의 디자인과 레이아웃을 매력적으로 만드는 데 중요한 역할을 합니다. 선택자는 CSS에서 스타일을 적용할 HTML 요소를 지정하는 방법입니다.
## 이번 회차에서 다룰 내용 미리보기
이번 회차에서는 CSS 선택자의 개념과 함께, 기본 선택자인 요소 선택자, 클래스 선택자, ID 선택자에 대해 자세히 살펴보겠습니다. 기본 선택자를 이해하는 것은 이후의 심화 학습을 위한 중요한 기초가 됩니다.
## CSS 선택자란?
CSS 선택자는 HTML 문서 내에서 특정 요소를 선택하여 스타일을 적용하는 방법입니다. 선택자는 HTML 요소의 이름, 클래스, ID 등을 통해 요소를 식별할 수 있게 해줍니다. 이렇게 선택된 요소에 스타일을 적용하면, 웹 페이지의 시각적 표현을 개선할 수 있습니다.
### 기본 선택자 소개
1. **요소 선택자 (Element Selector)**: HTML 요소의 이름을 사용하여 선택합니다. 예를 들어, `<h1>` 요소를 선택하려면 다음과 같이 작성합니다.
```css
h1 {
color: blue;
}
```
위 코드는 모든 `<h1>` 요소의 글씨 색상을 파란색으로 변경합니다.
2. **클래스 선택자 (Class Selector)**: HTML 요소에 클래스 속성을 사용하여 선택합니다. 클래스 선택자는 점(`.`)으로 시작합니다. 예를 들어, 클래스가 `highlight`인 요소를 선택하려면 다음과 같이 작성합니다.
```css
.highlight {
background-color: yellow;
}
```
이렇게 하면 클래스가 `highlight`인 모든 요소의 배경색이 노란색으로 변경됩니다.
3. **ID 선택자 (ID Selector)**: HTML 요소에 ID 속성을 사용하여 선택합니다. ID 선택자는 샵(`#`)으로 시작합니다. 예를 들어, ID가 `main-title`인 요소를 선택하려면 다음과 같이 작성합니다.
```css
#main-title {
font-size: 24px;
}
```
이 코드는 ID가 `main-title`인 요소의 글꼴 크기를 24픽셀로 설정합니다.
## 실습 예제
이제 기본 선택자를 사용하여 간단한 웹 페이지를 만들어 보겠습니다. 아래의 HTML 코드를 작성해 보세요.
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 선택자 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="main-title">CSS 선택자 기초 강좌</h1>
<p class="highlight">이 문장은 강조 표시됩니다.</p>
<p>일반 문장입니다.</p>
</body>
</html>
```
그리고 `styles.css` 파일에 다음과 같은 CSS 코드를 추가해 보세요.
```css
h1 {
color: blue;
}
.highlight {
background-color: yellow;
}
#main-title {
font-size: 24px;
}
```
위 코드를 실행하면 각 선택자에 따라 스타일이 적용된 것을 확인할 수 있습니다.
## 핵심 포인트 정리
- CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 방법입니다.
- 기본 선택자로는 요소 선택자, 클래스 선택자, ID 선택자가 있습니다.
- 선택자는 웹 페이지의 디자인을 매력적으로 만드는 데 필수적입니다.
## 다음 회차 예고 및 학습 동기 부여
다음 회차에서는 CSS 선택자의 고급 선택자에 대해 탐구할 것입니다. 자식 선택자, 자손 선택자, 속성 선택자 등 다양한 선택자를 배워보며, 더 정교하고 강력한 스타일링 기술을 익혀보세요. 계속해서 학습을 이어가면 CSS의 매력을 더욱 깊이 이해할 수 있습니다. 다음 회차에서 만나요!