[CSS] 6-4. 캐스케이딩 스타일 시트
6-4. 캐스케이딩 스타일 시트
6-1 ~ 6-3 장의 스타일 시트는 사실 CSS라는 명칭으로 부르는 것이 더 정확합니다. ‘스타일 시트’ 앞에 ‘캐스케이딩(Cascading)’이라는 용어가 하나 더 붙은 것이 CSS입니다.
이번 포스팅에서는 캐스케이딩의 의미와 역할에 대해 알아보겠습니다.
캐스케이딩의 의미
캐스케이딩은 스타일 시트에서 우선순위가 위에서 아래로 적용된다는 의미로 사용합니다. 그래서 CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다.
캐스케이딩은 스타일의 충돌을 막아주는 중요한 개념입니다. 스타일이 충돌하지 않게 하는 방법으로 다음 2가지 방법이 있습니다.
- 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용합니다.
- 스타일 상속: 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.
스타일 우선순위
스타일의 우선 순위는 다음 3가지 개념에 따라 지정됩니다.
얼마나 중요한가?
웹 브라우저에 내용을 표시할 때는 단순히 CSS 소스의 스타일만 적용되는 것이 아닙니다. 첫번째로 컴퓨터 사용자가 지정한 스타일, 두번째로 웹 문서 제작자의 스타일, 그리고 세번째로 웹 브라우저의 기본 스타일이 우선 순위를 가진 채로 적용됩니다.
적용 범위는 어디까지인가?
중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위가 결정되며, 스타일 적용 범위가 좁을수록 우선순위가 높아집니다.
단, 여기에서 스타일 규칙에 !important 를 붙이면 그 스타일은 다른 스타일보다 우선 순위가 높아집니다.
- !important
- 인라인 스타일
- id 스타일
- 클래스 스타일
- 타입 스타일
소스 코드의 작성 순서는 어떠한가?
중요도와 적용 범위가 같다면 그 다음은 정의한 소스 순서로 우선순위가 정해집니다.
나중에 적은 스타일의 우선 순위가 높습니다.
👍 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
<style>
p {
color:black;
}
h1 {
color: brown !important;
}
p {
color:blue;
}
</style>
</head>
<body>
<h1 style="color:green">레드향</h1>
<p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로</p>
<p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</body>
</html>
- 첫 번째 텍스트인 < h1 > 태그에는 타입 스타일과 인라인 스타일이 모두 사용되었습니다. 인라인 스타일이 타입 스타일보다 우선순위가 높지만, 타입 스타일을 정의할 때 !important 를 사용했기 때문에 갈색 글씨가 적용됩니다.
- 첫 번째 < p > 태그에서는 인라인 스타일에 의해 빨간색 글씨가 적용됩니다. 두번째와 세번째 < p > 태그는 타입 스타일에 의해 영향을 받는데, 나중에 적은 스타일의 우선순위가 높으므로 파란색 글씨가 적용됩니다.
스타일 상속
웹 문서에서 사용하는 태그는 서로 포함 관계가 있습니다. 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 합니다.
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라 합니다.
정리
- CSS는 Cascading Style Sheet의 줄임말로, 우선순위가 있는 스타일 시트라고 할 수 있습니다.
- 스타일 우선순위는 얼마나 중요한지, 적용 범위는 어디까지인지, 소스 작성 순서는 어떠한지의 3가지 기준으로 결정됩니다.
- 얼마나 중요한가? 사용자 스타일 > 제작자 스타일 > 브라우저 스타일
- 적용범위는 어디까지인가? !important > 인라인 스타일 > id 스타일 > 클래슷 스타일 > 타입 스타일
- 소스 작성 순서는 어떠한가? 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씁니다.
Leave a comment