한 태그에 여러 스타일이 적용될 때, CSS는 우선순위에 따라 스타일이 지정됩니다. 이러한 CSS의 캐스케이딩(cascading)과 오버라이딩(overriding)에 대해 알아보겠습니다.
[ Contents ]
1. 스타일 캐스케이딩(Style Cascading)과 오버라이딩(Overriding)
Cascading은 '위에서 아래로 흐르는' 또는 '상속하는'이라는 뜻을 갖고 있습니다. 하나의 태그에 다양한 스타일이 지정되었을 경우, CSS는 우선순위에 따라 하나씩 적용합니다.
맨 마지막에 적용되는 스타일이 가장 우선순위가 높으며, 해당 스타일로 덮어쓰게 됩니다. (또는 우선순위가 낮은 스타일은 무시되기도 합니다.)
2. 스타일 우선순위
1) 나중에 적용한 속성값의 우선순위가 높음
p {color: blue; font-size: 20px;}
p {color: red;}동일한 선택자의 경우, 나중에 적용한 속성값을 적용합니다. 물론 앞서 정의한 p {color: blue; font-size: 20px;}가 무시되는 건 아닙니다. color 속성만 red로 갱신되었을 뿐, 글자 크기는 20px로 동일합니다.
2) 더 구체적으로 작성된 선택자의 우선순위가 높음
div p {color: red}
p {color: blue; font-size: 20px;} <div>
<p>star가 되고나서</p>
</div>구체적으로 하위(자식) 태그에 대해 정의한 선택자가 있으면, 해당 속성값을 우선 반영합니다. 이 역시도 기존 p의 font-size가 무시되진 않습니다.
3) style > id > class > type 순으로 우선순위가 높음
<p style="color: blue;">star가 되고나서 </p>직접 태그에 지정하는 style이 제일 우선순위가 높습니다. 그다음으로 id, class, type 선택자 순입니다.
4) inline이 global이나 external보다 우선순위가 높음
<p style="color: blue;">star가 되고나서 </p>태그에 직접 style을 지정하는 inline 방식이 제일 우선순위가 높습니다. head에서 style로 지정하거나, 외부 css파일을 불러오는 건 '마지막에' 위치한 게 적용됩니다.
<head>
<style>
p {color: red;}
</style>
<link rel="stylesheet" type="text/css" href="test.css">
</head>만약 이렇게 되어있다면, css파일에서 지정한 p의 스타일이 적용됩니다.
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<style>
p {color: red;}
</style>
</head>반대로 link 태그가 위로 올라간다면, style에서 전역으로 지정한 p의 스타일이 적용됩니다.
'Web' 카테고리의 다른 글
| [HTML] 테이블 표, 행, 열 만들고 (<table>, <tr>, <th>, <td>) 행열 병합하기 (0) | 2022.05.24 |
|---|---|
| [HTML] 블록, 인라인 시맨틱 태그: figure, details, summary, mark, time, meter, progress (0) | 2022.05.11 |
| [CSS] 스타일을 지정하는 5가지 방법 (타입/자손/클래스/아이디/가상클래스 선택자) (0) | 2022.05.01 |
| [CSS] CSS를 적용하는 4가지 방법 (0) | 2022.04.30 |
| [CSS] 캐스케이딩(계단형) 스타일 시트란? CSS의 구성요소와 장점 (0) | 2022.04.29 |
댓글