BACKEND [Kamranahmedse Roadmap]/CSS

[CSS] CSS 반영 우선순위 (Cascading Order): inline, internal, external

Alex Han 2025. 2. 1. 17:52
반응형

CSS는 Cascading Style Sheets(종속 스타일 시트)라는 이름처럼 여러 스타일이 동시에 적용될 수 있으며, 우선순위에 따라 최종적으로 적용될 스타일이 결정된다.

 

CSS 우선순위는 “더 구체적인 것”과 “나중에 작성된 것”이 우선 적용됨이라는 원칙을 따른다.

 

 

1. CSS 적용 방식별 우선순위

CSS는 다음 3가지 방식으로 적용할 수 있으며, 우선순위는 다음과 같다.

 

🔹 1) Inline 스타일 (style="") - 최우선

<p style="color: red;">이 문장은 빨간색입니다.</p>

 

• HTML 요소에 직접 적용하는 방식

• 가장 높은 우선순위를 가짐

• 유지보수하기 어려워 잘 사용하지 않음

 

🔹 2) Internal 스타일 (<style> 태그)

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

 

• HTML 문서 내부 <head> 태그 안에서 <style> 태그로 적용

• Inline 스타일보다 낮고, External 스타일보다 높음

 

🔹 3) External 스타일 (.css 파일)

/* styles.css */
p {
    color: green;
}
<head>
    <link rel="stylesheet" href="styles.css">
</head>

 

• 외부 파일에 저장된 CSS를 가져와서 적용

• 여러 HTML 파일에서 공유 가능 → 유지보수 용이

• 우선순위는 Inline < Internal < External 순서

 

 

 

2. CSS 우선순위 정리

우선순위 순서 (높음 → 낮음)

 

1. Inline 스타일 (style="")

2. Internal 스타일 (<style>)

3. External 스타일 (.css 파일)

4. 기본 브라우저 스타일 (user-agent stylesheets)

 

 

 

3. 추가적인 CSS 우선순위 결정 요소

같은 방식의 CSS라면 더 구체적인 선택자가 우선 적용됨

 

1) 선택자의 구체성(Specificity)

CSS는 선택자의 우선순위 점수에 따라 적용된다.

선택자 유형 예시 우선순위 점수
!important color : red !important; 10000
inline 스타일 style="color : red;" 1000
ID 선택자 #id 100
클래스, 속성, 가상 클래스 .class, [type="text"], :hover 10
태그 선택자 p, h1, div 1
전체 선택자 * 0

 

 

 

4. 최종 우선순위 정리

 

(1) CSS 방식별 우선순위

Inline (가장 강함) > Internal > External > 기본 브라우저 스타일 (같은 방식으로 지정된 스타일이 충돌한다면  먼저 더 구체적으로 지정된 것을 우선으로 적용, 구체적인 지정 정도가 동일하다면 더 나중에 된 것을 우선순위로 적용)

 

(2) 선택자 우선순위

!important > Inline > ID > Class, Attribute, Pseudo-class > 태그 > 전체 선택자 (*)

 

 

➡ 이 두 가지 기준을 조합하여 CSS가 적용되는 순서가 결정된다.

반응형