HTML&CSS/CSS 기초
CSS 선택자와 속성 완벽 가이드: class, id, *, element 총정리
코딩하는 패션이과생
2025. 5. 11. 15:23
반응형
소개: CSS 선택자란?
CSS 선택자(Selector)는 스타일을 적용할 HTML 요소를 지정하는 패턴입니다. 쉽게 말해, HTML 문서에서 "어떤 요소에 스타일을 적용할 것인지" 브라우저에게 알려주는 역할을 합니다.
선택자는 CSS의 가장 기본적이면서도 강력한 기능으로, 이를 잘 활용하면 코드를 최소화하면서 효과적으로 스타일을 적용할 수 있습니다. 특정 요소, 요소 그룹, 특정 클래스나 ID를 가진 요소, 특정 상태의 요소 등 다양한 조건으로 요소를 선택할 수 있습니다.
CSS 선택자는 다음과 같은 구조로 사용됩니다:
선택자 {
속성: 값;
속성: 값;
}이 글에서는 다양한 CSS 선택자의 종류와 사용법, 그리고 선택자와 함께 자주 사용되는 속성들을 알아보겠습니다.
기본 선택자
CSS에서 가장 기본이 되는 선택자를 알아봅시다.
전체 선택자(Universal Selector): *
별표(*) 기호로 표시되는 전체 선택자는 문서의 모든 요소를 선택합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}용도:
- 모든 요소의 기본 스타일을 초기화(CSS 리셋)
- 모든 요소에 공통된 속성 적용(예: box-sizing)
장점:
- 간단하게 전체 요소에 스타일 적용 가능
단점:
- 성능에 영향을 줄 수 있음
- 너무 광범위하게 적용되어 예상치 못한 결과 초래 가능
사용 예시:
<style>
* {
border: 1px solid #ddd;
font-family: Arial, sans-serif;
}
</style>
<div>이 요소에도 테두리와 폰트가 적용됩니다.</div>
<p>이 단락에도 테두리와 폰트가 적용됩니다.</p>
<span>이 인라인 요소에도 테두리와 폰트가 적용됩니다.</span>요소 선택자(Element Selector)
HTML 태그 이름을 사용하여 특정 유형의 모든 요소를 선택합니다.
h1 {
color: blue;
font-size: 2em;
}
p {
line-height: 1.6;
margin-bottom: 1em;
}
div {
padding: 15px;
}용도:
- 특정 유형의 모든 요소에 일관된 스타일 적용
- 기본 구조적 스타일 정의
장점:
- 간결하고 직관적인 문법
- 특정 요소에 대한 기본 스타일 설정 용이
단점:
- 세부적인 제어 어려움
- 동일한 태그에 다른 스타일을 적용하기 위해서는 추가 선택자 필요
사용 예시:
<style>
h2 {
color: navy;
border-bottom: 2px solid navy;
padding-bottom: 5px;
}
p {
color: #333;
line-height: 1.5;
}
</style>
<h2>요소 선택자 예시</h2>
<p>이 단락은 요소 선택자에 의해 스타일이 적용됩니다.</p>
<p>모든 p 태그는 동일한 스타일을 가집니다.</p>클래스 선택자(Class Selector): .class
마침표(.) 뒤에 클래스 이름을 사용하여 특정 클래스 속성을 가진 요소를 선택합니다.
.container {
width: 80%;
margin: 0 auto;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
.btn {
padding: 8px 16px;
border-radius: 4px;
background-color: #4CAF50;
color: white;
}용도:
- 여러 요소에 동일한 스타일 적용
- 상황에 따라 다른 스타일 적용
- 재사용 가능한 스타일 컴포넌트 생성
장점:
- 높은 재사용성
- 요소 유형에 관계없이 적용 가능
- 한 요소에 여러 클래스 적용 가능
단점:
- HTML에 클래스 속성을 명시적으로 추가해야 함
- 과도한 사용 시 HTML이 복잡해질 수 있음
사용 예시:
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.text-center {
text-align: center;
}
.highlight {
background-color: #ffffcc;
padding: 5px;
border-left: 3px solid #ffcc00;
}
</style>
<div class="container">
<h2 class="text-center">클래스 선택자 예시</h2>
<p>일반 텍스트입니다.</p>
<p class="highlight">강조된 텍스트입니다.</p>
<div class="highlight text-center">여러 클래스가 적용된 요소입니다.</div>
</div>ID 선택자(ID Selector): #id
해시(#) 기호 뒤에 ID 이름을 사용하여 특정 ID 속성을 가진 요소를 선택합니다. ID는 페이지 내에서 고유해야 합니다.
#header {
background-color: #333;
color: white;
padding: 20px;
}
#main-content {
min-height: 500px;
padding: 20px;
}
#footer {
background-color: #f8f9fa;
padding: 10px;
text-align: center;
}용도:
- 페이지에서 단 하나만 존재하는 요소 스타일링
- JavaScript와의 연동(document.getElementById)
- 페이지 내 링크 앵커(#id)
장점:
- 가장 높은 특이성(우선순위)
- 요소를 고유하게 식별 가능
단점:
- 재사용 불가능
- 특이성이 너무 높아 스타일 재정의가 어려울 수 있음
- 과도한 사용 시 유지보수 어려움
사용 예시:
<style>
#page-header {
background-color: #2c3e50;
color: white;
padding: 15px;
text-align: center;
}
#unique-element {
border: 2px dashed red;
margin: 20px;
padding: 10px;
}
</style>
<header id="page-header">
<h1>ID 선택자 예시</h1>
</header>
<div id="unique-element">
<p>이 요소는 페이지에서 유일하게 'unique-element'라는 ID를 가집니다.</p>
</div>
<!-- 내부 링크 예시 -->
<a href="#page-header">페이지 상단으로 이동</a>결합 선택자
두 개 이상의 선택자를 결합하여 더 구체적인 요소를 선택할 수 있습니다.
하위 선택자(Descendant Selector): 공백
공백을 사용하여 특정 요소의 모든 하위(자손) 요소를 선택합니다.
.container p {
margin-bottom: 10px;
}
header h1 {
font-size: 2.5em;
}
ul li {
list-style-type: square;
}용도:
- 특정 컨테이너 내의 요소만 스타일링
- 문서 구조에 따른 스타일 적용
장점:
- 구조적 관계에 따른 스타일 지정 가능
- HTML 클래스 추가 없이 요소 선택 가능
단점:
- 선택자가 길어질 수 있음
- 문서 구조 변경 시 스타일도 영향 받을 수 있음
사용 예시:
<style>
.article p {
line-height: 1.6;
color: #444;
}
.article h2 {
color: #0066cc;
margin-bottom: 10px;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
</style>
<div class="article">
<h2>하위 선택자 예시</h2>
<p>이 단락은 .article 내부에 있어 스타일이 적용됩니다.</p>
<div>
<p>이 단락도 .article의 하위 요소이므로 스타일이 적용됩니다.</p>
</div>
</div>
<p>이 단락은 .article 외부에 있어 스타일이 적용되지 않습니다.</p>자식 선택자(Child Selector): >
꺾쇠(>) 기호를 사용하여 특정 요소의 직계 자식 요소만 선택합니다.
.container > p {
font-weight: bold;
}
ul > li {
margin-bottom: 5px;
}
header > nav {
background-color: #f8f9fa;
}용도:
- 직계 자식 요소만 스타일링
- 특정 부모 아래의 첫 번째 수준 요소만 선택
장점:
- 하위 선택자보다 더 제한적이고 정확한 선택
- 의도치 않은 요소 선택 방지
단점:
- 더 깊은 중첩 구조에 적용되지 않음
- 문서 구조에 의존적
사용 예시:
<style>
.parent > p {
background-color: #e0f7fa;
padding: 10px;
border: 1px solid #81d4fa;
}
</style>
<div class="parent">
<p>이 단락은 .parent의 직접적인 자식이므로 스타일이 적용됩니다.</p>
<div>
<p>이 단락은 .parent의 직접적인 자식이 아니므로 스타일이 적용되지 않습니다.</p>
</div>
</div>인접 형제 선택자(Adjacent Sibling Selector): +
더하기(+) 기호를 사용하여 특정 요소 바로 다음에 오는 형제 요소를 선택합니다.
h2 + p {
font-weight: bold;
}
label + input {
margin-left: 5px;
}
.item + .item {
margin-top: 10px;
}용도:
- 특정 요소 다음에 오는 요소만 스타일링
- 레이아웃 간격 조정
- 특정 콘텐츠 구조에 따른 스타일 적용
장점:
- 요소 간의 순서 관계에 따른 정확한 스타일링
- 마진 충돌 없이 요소 간 간격 조정 가능
단점:
- 요소 순서에 의존적
- 직접 인접한 요소에만 적용됨
사용 예시:
<style>
h3 + p {
font-style: italic;
color: #666;
}
.box + .box {
margin-top: 20px;
border-top: 1px dashed #ccc;
padding-top: 20px;
}
</style>
<h3>제목</h3>
<p>이 단락은 h3 바로 다음에 와서 스타일이 적용됩니다.</p>
<p>이 단락은 다른 p 요소 다음에 와서 스타일이 적용되지 않습니다.</p>
<div class="box">첫 번째 박스</div>
<div class="box">두 번째 박스 - 상단 마진과 테두리가 추가됩니다.</div>
<div class="box">세 번째 박스 - 상단 마진과 테두리가 추가됩니다.</div>일반 형제 선택자(General Sibling Selector): ~
물결표(~) 기호를 사용하여 특정 요소 뒤에 오는 모든 형제 요소를 선택합니다.
h2 ~ p {
color: darkgray;
}
.active ~ li {
color: lightgray;
}용도:
- 특정 요소 이후의 모든 형제 요소 스타일링
- 상태 변화에 따른 형제 요소 스타일 조정
장점:
- 인접 형제 선택자보다 더 넓은 범위 선택 가능
- 같은 수준의 여러 요소에 스타일 적용 가능
단점:
- 요소 순서에 의존적
- 의도한 것보다 많은 요소가 선택될 수 있음
사용 예시:
<style>
h3 ~ p {
color: #666;
font-size: 0.9em;
}
.important ~ li {
text-decoration: line-through;
opacity: 0.7;
}
</style>
<div>
<p>이 단락은 h3 이전에 나오므로 스타일이 적용되지 않습니다.</p>
<h3>중요 항목들</h3>
<p>이 단락은 h3 이후에 나오므로 스타일이 적용됩니다.</p>
<div>중간에 다른 요소가 있어도</div>
<p>이 단락도 h3 이후에 나오므로 스타일이 적용됩니다.</p>
</div>
<ul>
<li>첫 번째 항목</li>
<li class="important">중요 항목</li>
<li>이 항목은 .important 이후에 나와 스타일이 적용됩니다.</li>
<li>이 항목도 .important 이후에 나와 스타일이 적용됩니다.</li>
</ul>속성 선택자(Attribute Selectors)
속성 선택자는 특정 속성을 가진 요소나 특정 속성 값을 가진 요소를 선택합니다.
/* type 속성이 'text'인 모든 input 요소 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
/* target 속성이 있는 모든 a 요소 */
a[target] {
color: red;
}
/* href 속성이 'https://'로 시작하는 모든 a 요소 */
a[href^="https://"] {
padding-right: 20px;
background: url('external-link.png') no-repeat right;
}
/* href 속성이 '.pdf'로 끝나는 모든 a 요소 */
a[href$=".pdf"] {
padding-right: 20px;
background: url('pdf-icon.png') no-repeat right;
}
/* class 속성에 'btn'이 포함된 모든 요소 */
[class*="btn"] {
cursor: pointer;
}용도:
- 특정 속성을 가진 요소 선택
- 특정 입력 유형(input type) 스타일링
- 특정 링크 유형 구분
- 데이터 속성(data-*)에 기반한 스타일링
장점:
- HTML 구조 변경 없이 속성 기반 스타일링 가능
- 매우 구체적인 요소 선택 가능
- 특정 패턴에 따른 요소 선택 가능
단점:
- 문법이 다소 복잡할 수 있음
- 초보자에게 직관적이지 않을 수 있음
사용 예시:
<style>
/* 기본 스타일 */
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* 속성 선택자 */
input[type="text"] {
border-color: #3498db;
}
input[type="email"] {
border-color: #2ecc71;
}
input[type="password"] {
border-color: #e74c3c;
letter-spacing: 2px;
}
input[required] {
border-left-width: 3px;
}
a[href^="https://"] {
color: #3498db;
padding-right: 20px;
position: relative;
}
a[href^="https://"]::after {
content: "🔗";
position: absolute;
right: 0;
}
a[href$=".pdf"] {
color: #e74c3c;
padding-right: 20px;
position: relative;
}
a[href$=".pdf"]::after {
content: "📄";
position: absolute;
right: 0;
}
</style>
<form>
<div>
<input type="text" placeholder="이름">
</div>
<div>
<input type="email" placeholder="이메일" required>
</div>
<div>
<input type="password" placeholder="비밀번호" required>
</div>
</form>
<div>
<a href="https://example.com">외부 링크</a><br>
<a href="document.pdf">PDF 문서</a>
</div>의사 클래스와 의사 요소
의사 클래스(Pseudo-classes)
의사 클래스는 요소의 특별한 상태를 선택합니다. 콜론(:)을 사용하여 표시합니다.
/* 마우스가 올라갔을 때 */
a:hover {
text-decoration: underline;
color: red;
}
/* 활성화된 링크 */
a:active {
color: orange;
}
/* 방문한 링크 */
a:visited {
color: purple;
}
/* 첫 번째 자식 요소 */
li:first-child {
font-weight: bold;
}
/* 마지막 자식 요소 */
li:last-child {
border-bottom: none;
}
/* 홀수 번째 요소 */
tr:nth-child(odd) {
background-color: #f2f2f2;
}
/* 짝수 번째 요소 */
tr:nth-child(even) {
background-color: #ffffff;
}
/* 체크된 상태의 체크박스 */
input:checked + label {
color: green;
}
/* 포커스된 입력 필드 */
input:focus {
outline: 2px solid blue;
}주요 의사 클래스:
- :hover - 마우스를 올렸을 때
- :active - 클릭하는 순간
- :focus - 포커스 받았을 때(예: 탭으로 선택)
- :visited - 방문한 링크
- :first-child - 첫 번째 자식 요소
- :last-child - 마지막 자식 요소
- :nth-child(n) - n번째 자식 요소
- :not(selector) - 특정 선택자에 맞지 않는 요소
- :checked - 체크된 상태의 input 요소
- :disabled - 비활성화된 요소
- :empty - 자식이 없는 요소
사용 예시:
<style>
/* 기본 스타일 */
a {
color: #3498db;
text-decoration: none;
transition: all 0.3s;
}
/* 의사 클래스 */
a:hover {
color: #2980b9;
text-decoration: underline;
}
a:active {
color: #1abc9c;
}
li {
padding: 8px;
border-bottom: 1px solid #eee;
}
li:first-child {
font-weight: bold;
background-color: #f8f9fa;
}
li:last-child {
border-bottom: none;
}
li:nth-child(even) {
background-color: #f1f1f1;
}
input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 부정 의사 클래스 */
p:not(.excluded) {
margin-bottom: 15px;
}
</style>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">제품</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
<li><a href="#">회사 소개</a></li>
</ul>
</nav>
<form>
<div>
<input type="text" placeholder="이름">
</div>
<div>
<button type="submit">제출</button>
<button type="button" disabled>비활성화 버튼</button>
</div>
</form>
<div>
<p>이 단락은 margin-bottom이 적용됩니다.</p>
<p class="excluded">이 단락은 excluded 클래스가 있어 margin-bottom이 적용되지 않습니다.</p>
<p>이 단락도 margin-bottom이 적용됩니다.</p>
</div>의사 요소(Pseudo-elements)
의사 요소는 요소의 특정 부분을 선택합니다. 이중 콜론(::)을 사용하여 표시합니다.
/* 첫 글자 선택 */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: darkred;
}
/* 첫 줄 선택 */
p::first-line {
font-style: italic;
}
/* 요소 앞에 내용 추가 */
h2::before {
content: "➤ ";
color: blue;
}
/* 요소 뒤에 내용 추가 */
.external-link::after {
content: " ↗";
font-size: 0.8em;
}
/* 텍스트 선택 스타일 */
::selection {
background-color: yellow;
color: black;
}주요 의사 요소:
- ::first-letter - 요소의 첫 글자
- ::first-line - 요소의 첫 줄
- ::before - 요소 내용 앞에 삽입
- ::after - 요소 내용 뒤에 삽입
- ::selection - 사용자가 선택한 텍스트
- ::placeholder - input 요소의 플레이스홀더 텍스트
사용 예시:
<style>
p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 15px;
}
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
line-height: 1;
margin-right: 5px;
}
p::first-line {
font-weight: bold;
color: #2c3e50;
}
h2::before {
content: "✦ ";
color: #e74c3c;
}
.external-link::after {
content: " ↗";
font-size: 0.8em;
color: #95a5a6;
}
::selection {
background-color: #f39c12;
color: white;
}
input::placeholder {
color: #95a5a6;
font-style: italic;
}
</style>
<h2>의사 요소 예시</h2>
<p>이 단락의 첫 글자와 첫 줄은 다른 스타일이 적용됩니다. 첫 줄은 굵게 표시되며, 첫 글자는 크기가 크고 파란색으로 표시됩니다. 이 텍스트는 충분히 길어서 여러 줄로 표시되며, 첫 줄 이후에는 일반 스타일이 적용됩니다.</p>
<a href="https://example.com" class="external-link">외부 웹사이트 방문하기</a>
<div>
<input type="text" placeholder="이 텍스트는 스타일이 변경됩니다">
</div>CSS 선택자 우선순위(Specificity)
동일한 요소에 여러 스타일이 적용될 경우, 브라우저는 선택자 우선순위(Specificity)에 따라 어떤 스타일을 적용할지 결정합니다.
우선순위 순서 (낮음 → 높음)
- 전체 선택자(*): 0점
- 요소 선택자(element): 1점
- 클래스(.class), 속성([attr]), 의사 클래스(:hover): 10점
- ID 선택자(#id): 100점
- 인라인 스타일(style=""): 1000점
- !important: 모든 선택자보다 우선
예시
p {
color: red; /* 요소 선택자: 1점 */
}
.text {
color: green; /* 클래스 선택자: 10점 */
}
#unique {
color: blue; /* ID 선택자: 100점 */
}
p.text {
color: purple; /* 요소(1) + 클래스(10) = 11점 */
}
#unique p.text {
color: orange; /* ID(100) + 요소(1) + 클래스(10) = 111점 */
}<p>이 텍스트는 빨간색입니다. (요소 선택자)</p>
<p class="text">이 텍스트는 보라색입니다. (요소 + 클래스 선택자)</p>
<div id="unique">
<p class="text">이 텍스트는 주황색입니다. (#unique p.text 선택자)</p>
</div>
<p style="color: brown;">이 텍스트는 갈색입니다. (인라인 스타일)</p>우선순위에 대한 팁
- ID보다는 클래스 사용을 권장합니다(유지보수성)
!important는 최후의 수단으로만 사용합니다- 의미 있고 구체적인 클래스 이름을 사용합니다
- 선택자 중첩이 너무 깊지 않게 유지합니다(3-4단계 이하)
- CSS 프레임워크 사용 시 우선순위 충돌을 주의합니다
자주 사용되는 CSS 속성 소개
선택자와 함께 사용하는 주요 CSS 속성들을 알아봅시다.
텍스트 스타일
p {
color: #333; /* 텍스트 색상 */
font-family: Arial, sans-serif; /* 글꼴 */
font-size: 16px; /* 글꼴 크기 */
font-weight: bold; /* 글꼴 두께 */
font-style: italic; /* 글꼴 스타일 */
text-align: center; /* 텍스트 정렬 */
text-decoration: underline; /* 텍스트 장식 */
line-height: 1.5; /* 줄 높이 */
letter-spacing: 1px; /* 자간 */
text-transform: uppercase; /* 텍스트 변환 */
}박스 모델
div {
width: 300px; /* 너비 */
height: 200px; /* 높이 */
margin: 10px; /* 외부 여백 */
padding: 20px; /* 내부 여백 */
border: 1px solid #ccc; /* 테두리 */
border-radius: 5px; /* 테두리 둥글기 */
box-sizing: border-box; /* 박스 크기 계산 방식 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 */
}배경
section {
background-color: #f9f9f9; /* 배경색 */
background-image: url('bg.jpg'); /* 배경 이미지 */
background-repeat: no-repeat; /* 배경 반복 */
background-position: center; /* 배경 위치 */
background-size: cover; /* 배경 크기 */
background: #f9f9f9 url('bg.jpg') no-repeat center / cover; /* 단축 속성 */
}레이아웃
.container {
display: flex; /* 표시 방식 */
flex-direction: row; /* 플렉스 방향 */
justify-content: space-between; /* 수평 정렬 */
align-items: center; /* 수직 정렬 */
position: relative; /* 위치 지정 방식 */
float: left; /* 플로팅 */
z-index: 10; /* 쌓임 순서 */
}전환 및 애니메이션
button {
transition: all 0.3s ease; /* 전환 효과 */
}
.animated {
animation: slide 1s ease infinite; /* 애니메이션 */
}
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}실전 예제: 선택자 조합하기
다양한 선택자를 조합하여 복잡한 스타일링을 구현하는 실전 예제를 살펴봅시다.
네비게이션 메뉴 스타일링
<style>
/* 기본 스타일 */
.nav {
background-color: #333;
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
/* 모든 직계 li 요소 */
.nav > li {
position: relative;
}
/* 직계 li 안의 모든 a 요소 */
.nav > li > a {
color: white;
padding: 15px 20px;
display: block;
text-decoration: none;
transition: all 0.3s;
}
/* a에 마우스 오버 시 */
.nav > li > a:hover {
background-color: #555;
}
/* 드롭다운 메뉴 */
.nav > li > ul {
position: absolute;
background-color: #444;
padding: 0;
margin: 0;
list-style: none;
width: 200px;
display: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* li에 마우스 오버 시 드롭다운 표시 */
.nav > li:hover > ul {
display: block;
}
/* 드롭다운 내 항목 */
.nav > li > ul > li > a {
color: white;
padding: 10px 15px;
display: block;
text-decoration: none;
transition: all 0.3s;
}
/* 드롭다운 항목에 마우스 오버 시 */
.nav > li > ul > li > a:hover {
background-color: #666;
}
/* 활성 항목 */
.nav > li.active > a {
background-color: #4CAF50;
}
</style>
<ul class="nav">
<li class="active"><a href="#">홈</a></li>
<li>
<a href="#">제품</a>
<ul>
<li><a href="#">스마트폰</a></li>
<li><a href="#">노트북</a></li>
<li><a href="#">태블릿</a></li>
</ul>
</li>
<li><a href="#">서비스</a></li>
<li><a href="#">문의</a></li>
</ul>블로그 글 스타일링
<style>
/* 기본 스타일 */
.blog-post {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* 제목 스타일 */
.blog-post h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
}
/* 메타 정보 */
.blog-post .meta {
color: #7f8c8d;
font-size: 0.9em;
margin-bottom: 20px;
}
/* 첫 단락 강조 */
.blog-post > p:first-of-type {
font-size: 1.1em;
font-weight: bold;
color: #34495e;
}
/* 링크 스타일 */
.blog-post a {
color: #3498db;
text-decoration: none;
border-bottom: 1px dotted #3498db;
transition: all 0.3s;
}
.blog-post a:hover {
color: #2980b9;
border-bottom-style: solid;
}
/* 인용구 */
.blog-post blockquote {
border-left: 4px solid #e74c3c;
padding: 10px 20px;
margin: 20px 0;
background-color: #f9f9f9;
font-style: italic;
}
/* 이미지 */
.blog-post img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 5px;
}
/* 이미지 캡션 */
.blog-post img + em {
display: block;
text-align: center;
color: #7f8c8d;
font-size: 0.9em;
margin-top: 5px;
}
/* 코드 블록 */
.blog-post pre {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: 3px;
padding: 15px;
overflow-x: auto;
font-family: monospace;
margin: 20px 0;
}
/* 인라인 코드 */
.blog-post code {
background-color: #f8f8f8;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
</style>
<article class="blog-post">
<h2>CSS 선택자 마스터하기</h2>
<div class="meta">작성일: 2025년 5월 11일 | 작성자: 홍길동</div>
<p>CSS 선택자는 웹 디자인의 핵심 개념 중 하나입니다. 이 글에서는 다양한 CSS 선택자의 종류와 활용법을 알아봅니다.</p>
<p>선택자를 잘 활용하면 HTML을 변경하지 않고도 스타일을 효과적으로 적용할 수 있습니다.</p>
<blockquote>
선택자는 HTML과 CSS를 연결하는 다리입니다. 적절한 선택자를 사용하면 코드 효율성과 유지보수성이 크게 향상됩니다.
</blockquote>
<h3>기본 선택자</h3>
<p>가장 기본적인 선택자에는 요소 선택자, 클래스 선택자, ID 선택자가 있습니다.</p>
<pre><code>/* 요소 선택자 */
p {
color: blue;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* ID 선택자 */
#header {
background-color: black;
color: white;
}</code></pre>
<p>더 자세한 내용은 <a href="#">CSS 선택자 고급 가이드</a>를 참조하세요.</p>
<img src="https://via.placeholder.com/800x400" alt="CSS 선택자 다이어그램">
<em>그림: CSS 선택자의 종류와 관계</em>
</article>효율적인 선택자 작성법
1. 선택자 최적화
/* 피해야 할 방식 (과도하게 구체적) */
body div.container ul.menu li a.nav-link {
color: blue;
}
/* 더 나은 방식 */
.menu .nav-link {
color: blue;
}
/* 또는 더 직접적으로 */
.nav-link {
color: blue;
}2. 클래스 이름 규칙
/* BEM 방식 예시 */
.block {} /* 컴포넌트 */
.block__element {} /* 컴포넌트의 일부 */
.block--modifier {} /* 컴포넌트의 변형 */
/* 예시 */
.card {} /* 카드 컴포넌트 */
.card__title {} /* 카드 제목 */
.card__image {} /* 카드 이미지 */
.card--featured {} /* 강조된 카드 */3. 유지보수를 고려한 선택자
/* CSS 의존성이 높은 방식 (HTML 구조 변경 시 깨짐) */
header nav ul li a {
color: blue;
}
/* 더 유지보수하기 좋은 방식 */
.main-nav-link {
color: blue;
}선택자와 함께 사용하면 좋은 HTML 태그
CSS 선택자와 함께 사용하면 좋은 HTML 태그를 몇 가지 소개합니다:
1. 시맨틱 구조 태그
<header class="page-header">
<h1 class="site-title">웹사이트 제목</h1>
<nav class="main-nav">
<!-- 네비게이션 메뉴 -->
</nav>
</header>
<main class="content">
<aside class="sidebar">
<!-- 사이드바 내용 -->
</aside>
<section class="articles">
<article class="post">
<!-- 게시물 내용 -->
</article>
</section>
</main>
<footer class="page-footer">
<!-- 푸터 내용 -->
</footer>2. 콘텐츠 구조화 태그
<article class="product-card">
<header class="product-header">
<h3 class="product-title">제품명</h3>
<p class="product-category">카테고리</p>
</header>
<figure class="product-image">
<img src="product.jpg" alt="제품 이미지">
<figcaption>제품 설명 이미지</figcaption>
</figure>
<div class="product-details">
<p class="product-description">제품 설명...</p>
<data value="39900" class="product-price">39,900원</data>
</div>
<footer class="product-footer">
<button class="btn btn-primary">장바구니에 추가</button>
</footer>
</article>3. 목록 및 탐색 태그
<nav class="main-navigation">
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">홈</a></li>
<li class="nav-item active"><a href="#" class="nav-link">제품</a>
<ul class="dropdown">
<li class="dropdown-item"><a href="#" class="dropdown-link">카테고리 1</a></li>
<li class="dropdown-item"><a href="#" class="dropdown-link">카테고리 2</a></li>
</ul>
</li>
<li class="nav-item"><a href="#" class="nav-link">서비스</a></li>
</ul>
</nav>4. 폼 요소
<form class="contact-form">
<div class="form-group">
<label for="name" class="form-label">이름</label>
<input type="text" id="name" class="form-control" required>
<span class="form-hint">성과 이름을 입력하세요</span>
</div>
<div class="form-group">
<label for="email" class="form-label">이메일</label>
<input type="email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="message" class="form-label">메시지</label>
<textarea id="message" class="form-control" rows="5"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-submit">보내기</button>
<button type="reset" class="btn btn-reset">초기화</button>
</div>
</form>5. 데이터 표시 태그
<table class="data-table">
<caption class="table-caption">분기별 매출 현황</caption>
<thead class="table-header">
<tr>
<th scope="col" class="header-cell">분기</th>
<th scope="col" class="header-cell">매출액</th>
<th scope="col" class="header-cell">성장률</th>
</tr>
</thead>
<tbody class="table-body">
<tr class="data-row">
<th scope="row" class="row-header">1분기</th>
<td class="data-cell">1,000만원</td>
<td class="data-cell">5%</td>
</tr>
<!-- 추가 행 -->
</tbody>
<tfoot class="table-footer">
<tr>
<th scope="row" class="row-header">합계</th>
<td class="data-cell">4,500만원</td>
<td class="data-cell">12%</td>
</tr>
</tfoot>
</table>자주 묻는 질문(FAQ)
Q1: ID와 클래스 중 어떤 것을 사용해야 할까요?
A: 일반적으로 클래스 선택자를 우선적으로 사용하는 것이 좋습니다. 클래스는 재사용할 수 있고 스타일 충돌 가능성이 적습니다. ID는 페이지에서 정말 유일한 요소(헤더, 메인 내비게이션 등)나 JavaScript에서 요소를 선택해야 할 때 사용하세요.
Q2: 선택자가 너무 길거나 복잡하면 어떻게 해야 하나요?
A: 선택자가 3-4단계 이상 길어지면 HTML 구조가 변경될 때 스타일이 깨질 가능성이 높아집니다. 대신 요소에 의미 있는 클래스를 추가하고 직접 선택하는 것이 좋습니다. CSS 전처리기를 사용한다면 중첩 기능을 활용할 수도 있습니다.
Q3: 전체 선택자(*)를 자주 사용해도 될까요?
A: 전체 선택자는 모든 요소에 영향을 주기 때문에 성능에 영향을 줄 수 있습니다. CSS 리셋이나 box-sizing 같은 전역 속성 설정에는 사용할 수 있지만, 일반적인 스타일링에는 지양하는 것이 좋습니다.
Q4: !important는 언제 사용해야 할까요?
A: !important는 특수한 상황에서만 최후의 수단으로 사용해야 합니다. 외부 CSS 프레임워크의 스타일을 재정의해야 할 때나 사용자 스타일(접근성 향상 등)을 적용할 때 등의 경우에만 제한적으로 사용하세요.
Q5: 의사 클래스와 의사 요소의 차이점은 무엇인가요?
A: 의사 클래스(:hover, :first-child 등)는 요소의 특별한 상태를 선택하고, 의사 요소(::before, ::after 등)는 요소의 특정 부분을 선택합니다. 의사 클래스는 콜론 하나(:)를, 의사 요소는 콜론 두 개(::)를 사용하여 구분합니다(CSS3 이후).
마치며
CSS 선택자는 웹 디자인의 강력한 도구로, HTML 요소를 정확히 선택하여 원하는 스타일을 적용할 수 있게 해줍니다. 기본 선택자부터 복합 선택자, 의사 클래스, 속성 선택자까지 다양한 선택자 유형을 이해하고 적절히 활용하면 더 효율적이고 유지보수하기 쉬운 CSS를 작성할 수 있습니다.
이 글에서 다룬 내용을 정리하면:
- 기본 선택자(*, element, .class, #id)의 사용법과 특징
- 결합 선택자를 통한 더 정교한 요소 선택 방법
- 속성 선택자를 통한 특정 속성을 가진 요소 선택
- 의사 클래스와 의사 요소를 통한 특별한 상태나 부분 선택
- 선택자 우선순위의 이해와 충돌 해결 방법
- 효율적인 선택자 작성법과 유지보수 고려 사항
CSS 선택자를 잘 활용하면 HTML 구조를 변경하지 않고도 다양한 디자인을 적용할 수 있습니다. 또한, 코드 중복을 줄이고 일관된 스타일 시스템을 구축하는 데 큰 도움이 됩니다.
웹 개발 여정에서 선택자의 힘을 최대한 활용하여 더 나은 웹사이트를 만들어 보세요!