1. CSS Selector란?
CSS Selector는 HTML 문서에서 스타일을 적용할 대상 요소를 지정하는 규칙입니다.
적절한 셀렉터를 사용하면 유지보수성이 좋아지고, 코드 중복을 줄이며, 원하는 요소만 깔끔하게 꾸밀 수 있습니다.
2. 주요 Selector 종류
- Universal Selector (*)
모든 요소를 한 번에 선택합니다. - Element Selector
특정 태그를 선택합니다. - Class Selector (.class-name)
같은 스타일을 여러 요소에 적용할 때 씁니다. - ID Selector (#id-name)
문서 내에 고유하게 한 번만 사용되는 식별자입니다. - Attribute Selector ([속성="값"])
속성과 값 조합으로 요소를 세밀하게 선택합니다. - Child & Descendant Selector
- A > B: A의 직계 자식 B만
- A B : A 내부의 모든 B (중첩 포함)
3. Selector 우선순위
- ID Selector (#id-name)
- Class/Attribute/Pseudo-class Selector (.class, [attr], :hover 등)
- Element Selector (h1, p, ul 등)
- Universal Selector (*)
우선순위가 높은 규칙이 낮은 규칙보다 나중에 적용됩니다.
4. 실전 예제 코드
다음 예제는 “애국가 2절” 가사 및 버튼을 꾸미고, 서로 다른 셀렉터가 어떻게 동작하는지 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Selector 예제</title>
<style>
/* 1. Universal Selector: 모든 요소에 초기값(리셋)과 공통 너비/정렬 적용 */
* {
margin: 0;
padding: 0;
width: 800px;
text-align: center;
box-sizing: border-box;
}
/* 2. Element Selector: 모든 <p> 태그에 테두리, 여백 적용 */
p {
border: 1px solid olive;
margin: 10px auto;
padding: 5px;
}
/* 3. Class Selector: .last-song 클래스가 붙은 <p>에 적용 */
.last-song {
color: blueviolet;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-color: blueviolet;
}
/* 4. ID Selector: #phrase-1, #phrase-2 고유 스타일 */
#phrase-1 {
color: chartreuse;
text-shadow: 1px 1px 2px black;
}
#phrase-2 {
color: white;
background-color: darkslategray;
text-shadow: 1px 1px 2px black;
}
/* 5. Attribute Selector: type="button"인 input 전체에 적용 */
input[type="button"] {
width: 150px;
margin: 10px auto;
display: block;
color: blue;
cursor: pointer;
}
/* 6. 더 구체적인 Attribute Selector: value가 '오전 수업 끝'인 버튼만 */
input[value="오전 수업 끝"] {
color: red;
}
</style>
</head>
<body>
<h1>애국가 2절</h1>
<p id="phrase-1">
남산 위에 저 소나무 철갑을 두른 듯
</p>
<p id="phrase-2">
바람 소리 불변함은 우리 기상일세
</p>
<p class="last-song">
무궁화 삼천리 화려강산
</p>
<p class="last-song">
대한사람 대한으로 길이 보전하세
</p>
<!-- 입력란 -->
<input type="text" id="msg" placeholder="메시지를 입력하세요">
<!-- 일반 버튼 -->
<input type="button" value="점심 맛있게 드세요">
<!-- value가 '오전 수업 끝'인 버튼 -->
<input type="button" id="reded"
value="오전 수업 끝"
onclick="self.close();">
</body>
</html>
5. 이 예제에서 눈여겨볼 포인트
- Universal Selector로 전체 리셋과 공통 레이아웃 지정
- <p> 태그의 기본 테두리와 여백을 Element Selector로 일괄 설정
- Class vs ID: 클래스는 재사용, ID는 고유 스타일용
- Attribute Selector로 버튼의 type과 value별 차별적 스타일링
- 셀렉터 우선순위 때문에 더 구체적인 규칙이 최종 적용됨
'HTML, CSS' 카테고리의 다른 글
| CSS로 간단한 가로 메뉴 만들기 (5) | 2025.08.08 |
|---|---|
| CSS 적용 방식과 예제 (7) | 2025.08.07 |
| HTML Table 태그 사용법 정리 (4) | 2025.08.07 |
| HTML 리스트(List)와 폼(Form) 태그 총정리 (5) | 2025.08.06 |
| HTML의 주요 특징과 <head>, <body>의 역할 (6) | 2025.08.06 |
