Cascading 캐스케이딩의 뜻 - 1. 스타일 우선순위
CSS는 Cascading Style Sheet의 줄임말입니다. Style Sheet는 스타일을 지정해주는 종이(?) 또는 페이지 정도로 이해하면 됩니다.
그러면 Cascading이란 무엇일까요?
Cascading이란 '위에서 아래로 흐르는', '상속 또는 종속하는'의 의미를 갖고 있습니다. 따라서 Cascading은 선택자에 적용된 많은 스타일 중에 어떤 스타일로 브라우저에 표현할지 결정해주는 원리를 의미하게 됩니다.
<body>
<div>
<p>블라블라</p>
</div>
</body>위 설명이 분명 확 와닿지 않을 것입니다. 아래 예시를 통해 그 의미를 알아봅시다.
위와 같은 코드가 있다고 해봅시다. 그런데 만약 <body>에서는 글자색을 빨간색으로 지정하고, <div>에서는 글자색을 파란색으로 지정하고, <p>에서는 글자색을 초록색으로 지정하면 어떻게 될까요? 과연 '블라블라'라는 텍스트의 글자색은 무엇이 될까요?
이러한 것들을 결정해주는 원리가 Cascading입니다. 캐스케이딩은 1. 스타일 우선순위, 2. 스타일 상속 두 가지 원칙을 따릅니다.
지금부터 그 두 가지 원칙에 대해 알아 보겠습니다.
1. 스타일 우선순위
우선순위란 어떤 스타일을 먼저 적용할지 결정하는 규칙을 말합니다. 우선순위는 다음의 세 가지 개념에 따라 지정됩니다. ①중요도 ②적용범위 ③소스 순서
먼저 '①중요도'에 대해 알아봅시다. 아래는 중요도의 우선순위를 나타낸 것입니다.
1순위: 사용자 스타일 시트
2순위: 제작자가 만든 !important 스타일
3순위: 제작자가 만든 일반 스타일
4순위: 기본적인 브라우저 스타일
'사용자 스타일 시트'란 특별한 조건이 필요한 사용자가 그들의 필요에 맞게 구성해 놓은 스타일 시트를 말합니다. 예를들어 저시력자는 글자를 명확히 읽기 위해 윈도우의 '고대비' 설정 기능을 사용할 수 있습니다. 그러면 그러한 스타일이 시스템에 저장되게 되는데, 그것이 '사용자 스타일 시트'입니다. 사용자 스타일 시트는 사용자가 시스템에 저장한 스타일이기 때문에, 웹페이지 제작자가 스타일을 제어할 수 없습니다.
'제작자가 만든 !important 스타일'이란 웹페이지 제작자가 스타일 시트에 스타일을 만들 때 속성값 뒤에 !important라고 써놓은 것을 말합니다. 예를들면 다음과 같습니다. div { color: blue !important; } 이렇게 !important를 붙이면 다른 일반 스타일보다 최우선해서 적용되게 됩니다.
'제작자가 만든 일반 스타일'이란 우리가 지금까지 계속 사용해왔던 그러한 일반적인 스타일들을 말합니다. 예를들면 다음과 같습니다. p { color: green; }
'기본적인 브라우저 스타일'이란 브라우저들마다 기본적으로 지정하고 있는 스타일입니다. 즉 크롬, 익스플로러, 파이어폭스 등 웹브라우저들이 기본적으로 지정해놓은 스타일들을 말합니다.
두 번째로 '②적용범위'에 대해 알아봅시다. 하나의 요소에 여러 스타일이 충돌하면 어떻게 될까요? 기본적으로 스타일 적용 범위가 좁을수록 즉, 정확히 필요한 요소에만 적용할 스타일일수록 우선 순위가 높아집니다. 아래는 적용범위의 우선순위를 나타낸 것입니다. 하나의 요소에 여러 스타일이 적용될 경우 아래 순서에 따라 스타일이 적용되게 됩니다.
1순위: 인라인 스타일
2순위: id 스타일
3순위: class 스타일
4순위: 태그 스타일
'인라인 스타일'이란 태그 안쪽에 style 속성을 사용해 적용한 스타일을 말합니다. 예를들면 다음과 같습니다. <p style="color: orange;">
'id 스타일'이란 선택자 이름 앞에 #을 사용해 아이디 선택자를 사용한 속성을 말합니다. 예를들면 다음과 같습니다. #abc { color: brown; }
'class 스타일'이란 선택자 이름 앞에 .을 사용해 클래스 선택자를 사용한 속성을 말합니다. 예를들면 다음과 같습니다. .def { color: yellow; }
'태그 스타일'이란 태그를 사용해 적용한 스타일 속성을 말합니다. 예를들면 다음과 같습니다. p { color: purple;}
세 번째로 '③소스 순서'에 대해 알아봅시다. 중요도와 적용범위가 같다면 어떻게 될까요? 그때는 나중에 나온 스타일이 먼저 나온 스타일을 덮어씁니다. 그것이 '소스 순서'입니다. 예를들어 p { color: black; }이라고 속성을 지정해놓고, 뒤에 다시 p { color: pink; }라고 지정하면, 결국 p태그의 color는 pink가 되게 됩니다.
캐스케이딩의 두 번째 원리인 '2. 스타일 상속'은 다음 시간에 알아보겠습니다.
그럼 이만.
'홈페이지 만들기 > 2단계. CSS' 카테고리의 다른 글
| CSS background 배경 관련 스타일(background-color, background-clip) (0) | 2020.12.10 |
|---|---|
| CSS Vendor Prefix 벤더 프리픽스 : -webkit-, -moz- 이게 도대체 뭐지? (0) | 2020.12.09 |
| CSS 목록 스타일: list-style-type list-style-image list-style-position list-style (0) | 2020.12.02 |
| CSS 문단 스타일: line-height text-overflow (0) | 2020.11.30 |
| CSS 문단 스타일: direction text-align text-indent (0) | 2020.11.19 |
댓글