CSS에서 C는 Cascading의 줄임말입니다. 단어 그대로, 계층성을 가진다는 의미를 갖죠. 스타일 시트를 형용하는 가장 중요한 단어로 사용될 만큼, 이 계층 구조는 중요한 의미를 갖습니다. 근본적으로 웹 문서의 요소에 스타일을 적용할 때, 우선순위를 두고 적용된다는 것이지요.
스타일을 적용하다 보면 여러 가지 이유로 다양한 스타일이 적용될 때 충돌이 발생할 수 있습니다. 이럴 때 스타일 적용 규칙을 설정하는 방식은 우선순위 / 상속이 있습니다. 우선순위는 말 그대로 중요도와 적용 범위의 기준을 따른다는 의미고, 상속은 태그 간의 포함 관계에 따라서 부모 요소에서 자식 요소로 전달되는 방식을 뜻합니다.
바로 와닿지 않으니, 상세히 살펴보도록 하겠습니다.
○ 스타일 우선순위
말 그대로 스타일 적용에 있어서, 어떤 스타일을 먼저 적용할 것인지를 우선순위에 따라 결정하게 됩니다. 우선순위를 결정하는 데는 크게 세 가지의 판단 기준이 있습니다.
1. 중요도
일단 스타일을 정하는 위치는 크게 [브라우저 기본 스타일] > [제작자 스타일] > [사용자 스타일]이 있습니다.
브라우저 기본 스타일은, 말 그대로 별다른 스타일 선언 없이 웹 문서를 작성했을 때 크롬이나 사파리 등이 디폴트로 갖고 있는 스타일을 의미합니다. 제작자(author) 스타일은 이 글을 읽고 있는 우리, 즉 웹 문서를 개발한 사람이 설정한 스타일을 뜻합니다. CSS 파일이나 HTML 내의 스타일로 선언된 것들을 의미하죠. 사용자(user) 스타일은 최종 사용자가 브라우저 상에서 설정한 옵션(이를테면 윈도우 테마 설정, 고대비 설정 등...)을 뜻합니다.
우선순위는 사용자 - 제작자 - 브라우저 기본 스타일 순으로 높습니다.
2. 적용 범위
중요도가 같을 경우, 스타일은 적용 범위의 영향을 받게 됩니다. 여기서 해당 스타일의 적용 범위는 좁은 것일수록 우선순위가 높다고 생각하면 됩니다. 단, !important가 붙은 스타일일 경우 모든 범위에 앞서는 가장 중요한 스타일이 됩니다.
적용 범위가 좁은 - 즉 우선순위가 높은 범위는 다음과 같습니다.
(1) !important : 최우선 순위로 적용되는 스타일
(2) 인라인 스타일 : 특정 태그 안에 'style' 속성을 이용해 부여된 스타일
(3) id 스타일 : 선택자에 #를 붙여 부여된 스타일. 한 문서에 한 번만 적용이 가능함
(4) 클래스 스타일 : 선택자에 .를 붙여 부여된 스타일. 해당 클래스에 여러 번 적용 가능함
(5) 타입 스타일 : 특정 태그에 일괄적으로 부여되는 스타일
위에서 설명한 것처럼, !important를 제외하면 적용 범위가 좁은 스타일이 우선순위가 높다는 것을 알 수 있습니다.
3. 코드 작성 순서
위에서 설명한 중요도와 기본 적용범위까지 모두 우선순위가 같을 경우에는, 소스의 코드 작성 순서에 따라 우선순위가 결정됩니다. 이때, 나중에 작성한 스타일이 앞서 작성된 스타일을 덮어쓰는 형태로 적용되는 점을 기억하면 됩니다.
아래의 예시를 보고 어떤 식으로 글자가 적용되어 출력될지를 판단해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: black
}
h1 {
color: brown !important;
}
p {
color:blue
}
* {
background-color: gray;
}
</style>
</head>
<body>
<h1 style="color: green;">스타일 우선순위</h1>
<p style="color: yellowgreen;">스타일 적용 우선순위를 알아봅시다.</p>
<p>이 라인은 별도 속성 없는</p>
<p>p태그로만 작성되었습니다.</p>
</body>
</html>
위의 코드를 적용하면, 아래의 그림과 같이 스타일이 적용됩니다.
스타일 적용에 있어서도 상속 관계에 영향을 받습니다. 태그의 포함관계에 따라서 부모 - 자식요소로 구분하게 됩니다. 만일, 스타일 시트에서 자식 요소에 스타일이 지정되지 않으면 부모 요소의 스타일 속성이 자식에게 전달됩니다. 예를 들어 본문의 내용은 모두 <body> 태그에 포함되죠? 그래서 body태그의 속성에 스타일을 적용하게 되면, 모든 문서 전체에 적용됩니다.
참고로 배경색, 배경 이미지는 상속 대상에서 제외됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(2) - 웹(외부) 폰트 사용하기 (0) | 2023.03.26 |
|---|---|
| [CSS] 2. 텍스트 스타일(1) - 폰트 스타일 속성 (0) | 2023.03.25 |
| [CSS] 1. CSS의 기본 개념(3) - 기본 선택자 (0) | 2023.03.22 |
| [CSS] 1. CSS의 기본 개념(2) - 스타일 시트란? (0) | 2023.03.20 |
| [CSS] 1. CSS의 기본 개념(1) - CSS란? (0) | 2023.03.19 |
