CSS 우선순위(Specificity)와 상속(Inheritance)는 스타일이 적용되는 순서를 결정하는 중요한 개념입니다. 복잡한 스타일을 관리할 때는 어떤 규칙이 적용될지 이해하는 것이 매우 중요합니다. 이 두 개념을 잘 활용하면 효율적이고 일관된 스타일링을 할 수 있습니다.
1. CSS 우선순위
CSS 우선순위는 여러 규칙이 하나의 요소에 적용될 때, 어떤 규칙이 우선적으로 적용될지를 결정합니다. CSS는 타입, 클래스, ID, 인라인 스타일 등 다양한 방식으로 스타일을 정의할 수 있는데, 우선순위는 이러한 스타일이 충돌할 때 해결해 줍니다.
CSS 우선순위는 아래와 같은 순서로 결정됩니다:
1). 인라인 스타일(Inline Style): HTML 요소에 직접 작성된 스타일이 가장 높은 우선순위를 가집니다.
<p style="color: red;">이 문장은 인라인 스타일로 빨간색입니다.</p>2) . ID 셀렉터: ID 셀렉터는 클래스나 타입 셀렉터보다 높은 우선순위를 가집니다.
#myParagraph {
color: blue;
}3). 클래스 셀렉터, 속성 셀렉터 및 가상 클래스: 클래스와 속성 셀렉터는 ID보다 낮지만 타입 셀렉터보다 높은 우선순위를 가집니다.
.blue-text {
color: blue;
}4). 타입 셀렉터: 태그 이름을 기반으로 한 셀렉터가 가장 낮은 우선순위를 가집니다.
p {
color: green;
}2. 우선순위 계산 방법
우선순위는 각각의 셀렉터 유형에 따라 숫자로 표현됩니다. 기본 규칙은 다음과 같습니다:
- 인라인 스타일: 1000
- ID 셀렉터: 100
- 클래스, 속성, 가상 클래스: 10
- 타입 셀렉터: 1
예시
/* 우선순위 계산: 10 */
.blue-text {
color: blue;
}
/* 우선순위 계산: 100 */
#special-text {
color: red;
}
/* 우선순위 계산: 1 */
p {
color: green;
}HTML:
<p id="special-text" class="blue-text">이 문장은 어떤 색일까요?</p>위 예시에서 #special-text의 우선순위는 100이므로, 이 스타일이 적용되어 텍스트는 빨간색으로 표시됩니다.
3. 상속 (Inheritance)
CSS 상속은 부모 요소의 스타일이 자식 요소에 자동으로 적용되는 CSS의 기능입니다. 상속되는 속성들은 주로 텍스트와 관련된 속성들입니다. 하지만, 모든 속성이 상속되는 것은 아닙니다. 예를 들어, color, font-family 등의 속성은 상속되지만, margin, padding 같은 박스 모델 관련 속성은 상속되지 않습니다.
상속 예시
body {
font-family: Arial, sans-serif;
color: darkblue;
}HTML:
<body>
<div>
<p>이 문장은 부모 요소인 body에서 상속된 글꼴과 색상을 가집니다.</p>
</div>
</body>위 코드에서는 body 태그에 설정한 font-family와 color 속성이 모든 자식 요소에 자동으로 적용됩니다.
4. !important 사용
!important는 우선순위 규칙을 무시하고 특정 스타일을 강제로 적용할 수 있도록 해줍니다. 이 규칙은 매우 높은 우선순위를 가지므로, CSS에서 마지막 수단으로 사용하는 것이 좋습니다.
예시
p {
color: green !important;
}이 스타일이 적용되면 다른 모든 우선순위 규칙을 무시하고 텍스트 색상이 녹색으로 설정됩니다.
예시 코드
<!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>
/* 타입 셀렉터 (우선순위: 1) */
p {
color: green;
}
/* 클래스 셀렉터 (우선순위: 10) */
.blue-text {
color: blue;
}
/* ID 셀렉터 (우선순위: 100) */
#special-text {
color: red;
}
/* 상속된 스타일 */
body {
font-family: Arial, sans-serif;
color: darkblue;
}
</style>
</head>
<body>
<p class="blue-text" id="special-text">이 문장은 빨간색입니다.</p>
<p>이 문장은 상속된 스타일과 우선순위 규칙을 따릅니다.</p>
</body>
</html>참고 사이트
'HTML&CSS' 카테고리의 다른 글
| [CSS] 9. 그리드(Grid) (0) | 2024.09.18 |
|---|---|
| [CSS] 8. Flexbox (0) | 2024.09.18 |
| [CSS] 7. float와 clear (0) | 2024.09.17 |
| [CSS] 6. 박스 모델 (Margin, Padding, Border, Content) (2) | 2024.09.16 |
| [CSS] 4. 속성(Property)과 값(Value) (0) | 2024.09.14 |
| [CSS] 3. 선택자(selector) (0) | 2024.09.13 |
| [CSS] 2. 문법과 규칙 (0) | 2024.09.13 |
| [CSS] 1. CSS 소개 (0) | 2024.09.13 |