CSS 우선순위
CSS 우선순위
CSS 우선순위, 또는 “Cascading Style Sheets”의 우선 순위는 여러 스타일 규칙이 동일한 HTML 요소에 적용될 때 어떤 스타일이 우선적으로 적용될지 결정하는 방법입니다. 이를 이해하는 것은 웹 개발에서 매우 중요합니다. CSS 우선순위는 크게 다음 세 가지 주요 요소에 의해 결정됩니다
- 중요도
- 구체성
- 소스 순서
CSS 우선순위 가이드
CSS에서 우선순위는 스타일이 적용되는 순서를 결정합니다. 이는 복잡한 스타일 시트에서 매우 중요한 개념입니다.
1. 중요도 (Importance)
CSS 규칙 중 !important가 사용된 스타일은 다른 모든 일반 규칙보다 높은 우선순위를 갖습니다.
1
2
3
p {
color: red !important; /* 이 규칙은 다른 'color' 규칙보다 우선적으로 적용됩니다 */
}
2.구체성 (Specificity)
구체성은 선택자가 특정한지를 나타냅니다. 구체성이 높은 선택자가 구체성이 낮은 선택자보다 우선합니다.
- 태그 선택자는 가장 낮은 구체성을 갖습니다 (예: div, p).
- 클래스 선택자는 태그 선택자보다 구체성이 높습니다 (예: .class-name).
- ID 선택자는 클래스 선택자보다 구체성이 높습니다 (예: #id-name).
1
2
3
4
5
6
7
8
9
10
11
12
#header { /* ID 선택자 */
background-color: yellow;
}
.content p { /* 클래스와 태그 선택자 */
background-color: blue;
}
p { /* 태그 선택자 */
background-color: green;
}
3. 소스 순서 (Source Order)
만약 중요도와 구체성이 동일하다면, 나중에 선언된 스타일이 이전에 선언된 스타일을 덮어쓰게 됩니다.
1
2
3
4
5
6
7
body {
background-color: red; /* 먼저 선언됨 */
}
body {
background-color: blue; /* 나중에 선언됨, 이 규칙이 적용됨 */
}
4. CSS 상속 (Inheritance)
CSS에서 일부 속성은 자식 요소로 상속될 수 있습니다. 상속되는 속성은 자식 요소에 직접 스타일을 적용하지 않아도 부모 요소로부터 스타일 값을 받게 됩니다. 예를 들어, color와 font-family는 상속되는 속성입니다.
1
2
3
4
5
6
7
div {
color: green; /* 모든 자식 `<p>` 태그들도 녹색 텍스트를 갖게 됩니다 */
}
p {
font-size: 16px; /* 'font-size'는 상속되는 속성이지만, 여기서 명시적으로 설정했습니다 */
}
상속은 CSS 우선순위에서 구체성과 중요도에 영향을 미치지 않지만, 부모 요소에 적용된 스타일이 자식에게 전파되는 방식을 이해하는 것이 중요합니다.
5. 미디어 쿼리 (Media Queries)
미디어 쿼리는 특정 조건(예: 화면 크기, 해상도)에 따라 다른 스타일 규칙을 적용할 수 있게 해줍니다. 미디어 쿼리 내의 스타일은 해당 조건이 참일 경우에만 적용되며, 이는 다른 일반 CSS 규칙보다 우선시될 수 있습니다.
1
2
3
4
5
6
7
8
9
10
body {
background-color: yellow; /* 기본 배경색 */
}
@media (max-width: 600px) {
body {
background-color: blue; /* 화면 크기가 600px 이하일 때 적용되는 배경색 */
}
}
미디어 쿼리는 반응형 디자인을 구현할 때 필수적인 도구입니다. CSS 규칙의 우선순위를 재정의하는 방식으로 작용할 수 있습니다.
이 섹션들은 CSS 우선순위의 이해를 돕고, 실제 웹사이트에서 효과적인 스타일 관리를 위한 지식을 확장하는 데 도움을 줍니다.
6. CSS 변수 (Custom Properties)
CSS 변수, 또는 커스텀 프로퍼티는 특정 값을 저장하고 이를 문서 전체에 걸쳐 재사용할 수 있게 해줍니다. CSS 변수는 var() 함수를 사용하여 적용되며, 스코프는 선언된 위치에 따라 달라집니다.
1
2
3
4
5
6
7
8
9
10
11
:root {
--main-color: black;
}
body {
color: var(--main-color); /* 전체 문서에서 기본 텍스트 색상으로 사용 */
}
.button {
background-color: var(--main-color); /* 버튼의 배경색으로도 같은 변수 사용 */
}
7. 스타일 시트 간의 관계
여러 스타일 시트가 하나의 HTML 문서에 연결될 경우, 각 스타일 시트의 로드 순서가 중요합니다. 외부 스타일 시트는 보통 <head> 태그 안에 위치하며, 로드 순서는 코드 상에서의 순서에 따릅니다.
1
2
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
위의 예에서 style2.css는 style1.css에 정의된 같은 규칙들을 덮어쓸 수 있습니다. 이는 소스 순서 규칙과 관련이 있습니다.
8. 인라인 스타일의 우선순위
HTML 요소에 직접 적용된 인라인 스타일은 대부분의 외부 또는 내부 스타일 시트보다 높은 우선순위를 갖습니다. 이 방법은 특정 요소에 매우 특정한 스타일을 적용할 때 유용합니다.
1
<p style="color: red;">이 문장은 빨간색으로 표시됩니다.</p>
인라인 스타일은 구체성에서 가장 강력하며, !important를 제외하고는 다른 방법으로 우선 순위를 높이기 어렵습니다.