- CSS 선택자란? CSS 선택자는 HTML 문서에서 스타일을 적용하고 싶은 특정 요소를 "선택"하는 도구입니다. 마치 가게에서 물건을 고를 때 "이거 주세요!"라고 손으로 가리키는 것처럼, 선택자는 "이 요소에 스타일을 입히고 싶어요!"라고 CSS에게 알려주는 역할을 합니다.
• 예를 들어, HTML에 <p> 태그가 여러 개 있을 때, "모든 문단을 파란색으로 만들자"거나 "특정 클래스가 붙은 문단만 굵게 하자" 같은 작업을 선택자가 가능하게 해줍니다. • <h1> 태그를 선택해서 제목을 크게 만들기. • .warning 클래스를 가진 요소를 빨간색으로 강조하기. • #header라는 ID를 가진 부분에 배경색 추가하기.
- 선택자의 중요성
- 웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계.
- 기본 문법
- 선택자 { 속성: 값; } 형태
- 기본 선택자 정리
2. 선택자의 종류
1. 전체 선택자 ( * )
전체 선택자는 HTML 문서에 있는 모든 요소를 한꺼번에 선택합니다. 이름 그대로 "모두 다!"라는 뜻이에요. CSS에서 * 기호를 사용하며, 특정 태그나 조건 없이 페이지의 모든 요소에 스타일을 적용할 때 유용합니다.
- 주로 초기화 작업에 사용됩니다. 예를 들어, 브라우저마다 기본적으로 설정된 여백(margin)이나 패딩(padding)이 달라서 디자인에 혼란이 올 수 있는데, 이걸 한 번에 없애줄 때 많이 써요.
* {
margin: 0;
padding: 0;
}: 위 코드는 페이지의 모든 요소에서 여백과 패딩을 제거합니다. <h1>, <p>, <div> 등 뭐든 적용.
2. 태그 선택자
태그 선택자는 HTML 태그 이름을 직접 써서 해당 태그를 가진 모든 요소를 선택합니다. 예를 들어, <p> 태그를 선택하면 페이지에 있는 모든 문단에 스타일을 줄 수 있어요.
- 특정 "종류"의 요소를 한꺼번에 다루고 싶을 때 유용합니다.
p {
color: blue;
font-size: 16px;
}
3. 클래스 선택자 (.class)
클래스 선택자는 HTML 요소의 class 속성을 기준으로 선택합니다. . 뒤에 클래스 이름을 붙여서 사용하며, 같은 클래스를 가진 여러 요소에 동시에 스타일을 적용할 수 있어요.
- 개발자가 직접 요소에 "이름표"를 붙이는 셈이라, 원하는 대상을 더 구체적으로 골라낼 수 있습니다.
<p class="highlight">중요한 문단</p>
<div class="highlight">중요한 박스</div>
.highlight {
background-color: yellow;
font-weight: bold;
}
4. ID 선택자 (#id)
ID 선택자는 HTML 요소의 id 속성을 기준으로 선택합니다. # 뒤에 ID 이름을 붙여서 사용하며, ID는 문서에서 고유해야 하므로 단 하나의 요소만 선택합니다.
- 클래스와 달리 "이거 하나만!"이라는 특수한 상황에 쓰입니다.
<div id="header">헤더 영역</div>
#header {
background-color: gray;
padding: 20px;
}
실습 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>기본 선택자 실습</title>
<!-- <link rel="stylesheet" href="styles.css"> -->
<style>
* {
margin: 0;
padding: 0;
} /* 전체 초기화 */
h1 {
font-size: 24px;
}
.content {
color: purple;
}
#special-box {
background-color: yellow;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 class="title">제목</h1>
<p class="content">내용 1</p>
<p class="content">내용 2</p>
<div id="special-box">특별한 박스</div>
</body>
</html>- CSS 코드 (styles.css):
* { margin: 0; padding: 0; } /* 전체 초기화 */
h1 { font-size: 24px; }
.content { color: purple; }
#special-box {
background-color: yellow;
border: 2px solid black;
}
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS 선택자(가상 클래스 선택자) (0) | 2025.07.14 |
|---|---|
| CSS 선택자(결합 선택자) (1) | 2025.07.14 |
| CSS 크기와 단위, 색상 (0) | 2025.07.14 |
| CSS(Cascading Style Sheets)란 뭘까? (0) | 2025.07.14 |
| 시멘틱 태그란 (3) | 2025.07.14 |