목차
1. HTML 파일에 CSS 연결하는 방법이 3가지 인데, 동시에 연결하면 CSS 우선순위는 어떻게 될까?
2. 우선순위로 결정 이유가 있을까?
CSS 적용 우선순위
1위
Inline Style (인라인 스타일)
HTML 요소에 style 속성을 직접 지정
<p style="color: red;">이 텍스트는 빨간색입니다.</p>
2위
Embedded Style Sheet (내부 스타일 시트)
HTML <head> 내부의 <style> 태그에서 정의
<head> <style> p { color: blue; } </style> </head>
3위
External Style Sheet (외부 스타일 시트)
외부 CSS 파일을 태그로 연결하여 사용
<head> <link rel="stylesheet" href="style.css"> </head>
⚠️ 다만 !important 사용 시 예외로 무조건 최우선 적용된다. (참고)
동일한 속성에 여러 !important가 사용되면, 마지막으로 선언된 것이 적용된다.
CSS 스타일의 우선순위 적용 기준
-
중요도 (!important)
!important가 선언된 스타일이 무조건 최우선 적용된다.
color: red !important; -
선택자 특이성 (Specificity)
더 구체적인 선택자일수록 우선 적용된다.
#id > .class > tag -
선언 위치 (Source Order)
동일한 요소에 대해 여러 스타일이 선언되었을 경우, 나중에 선언된 스타일이 적용된다.
<style> vs <link> vs style="" -
상속 (Inheritance)
일부 속성(color, font 등)은 부모 요소의 스타일을 상속받는다.
`body { color: blue; } → 모든 텍스트가 파란색
*속성별 우선순위는 추후 이어서 포스팅 예정
예비 프론트엔드 개발자 김현지입니다.😃