[CSS] 스타일 우선순위와 스타일 상속
개요
CSS는 Cascading Style Sheet의 줄임말이다. 여기서 cascading은 사전적으로는 “폭포같은, 계속되는”이란 뜻을 가지는데, 여러 개의 스타일 시트들이 위에서 아래로 우선순위가 폭포(계단)처럼 적용된다는 의미를 가지고 있다고 한다. 즉, CSS는 우선순위가 존재하는 스타일 시트를 의미하는 셈이다. 이렇게 우선순위를 부여한 이유는 스타일들끼리 충돌할 여지가 있기에 이를 해결하기 위함이다. 사실 CSS에서 스타일 간 충돌을 방지하는 방법으로 “스타일 우선순위”와 “스타일 상속”이 있다.
스타일 우선순위
스타일 우선순위에는 크게 3종류로 나뉜다.
- 중요도
브라우저를 통해 웹 문서를 보는 로컬 디바이스 사용자, 웹 문서 제작자와 웹 브라우저 기본 스타일 이렇게 3개의 중요도로 나눌 수 있다. 이 세 중요도의 우선순위는 다음과 같다.
사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
즉, 사용자 스타일의 우선순위가 가장 높고, 브라우저 기본 스타일의 우선순위가 가장 낮다. 즉, 사용자 스타일을 제일 먼저 웹 문서에 적용하려고 한다는 뜻이다. 예를 들어, 사용자 컴퓨터에서는 텍스트 색을 주황색, 웹 문서 제작자는 빨간색, 웹 브라우저 기본 텍스트 색이 파란색이라 가정하면, 사용자 스타일인 주황색을 우선적으로 적용한다.
- 적용 범위
중요도가 같을 때에는 html, css 파일 내 스타일 적용 범위에 따라 우선순위가 정해진다. 다음은 그 우선순위이다.
!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
위 우선순위의 특징은 스타일 적용 범위가 작을수록 우선순위가 더 높아진다. 예로, id 스타일은 한 문서 내에서 단 하나의 요소에만 적용할 수 있으므로, 여러 요소에 적용시킬 수 있는 클래스 스타일보다 더 적용범위가 작으므로 id 스타일의 우선순위가 더 높게 측정된다. 그래서 같은 요소에 id 스타일과 클래스 스타일을 동시 적용하려는 경우 id 스타일을 우선적으로 적용한다.
스타일 규칙 뒤에 !important를 붙이는 경우, 해당 스타일이 가장 우선순위가 높아진다.
a {
background-color: blue !important;
}
스타일 상속
HTML의 요소에는 어떤 요소를 포함하는 부모 요소와 그 부모 요소에 의해 포함된 자식 요소가 존재한다. 스타일 상속은 이렇게 부모-자식 관계에 있는 요소에 대해, 부모 요소의 스타일 속성이 그대로 자식 요소에 상속되는 것을 말한다. 이 때, 자식 요소에 따로 스타일이 존재한다면 부모 요소로부터 상속된 스타일이 아닌 해당 스타일이 먼저 적용된다. 예로, <body> 태그는 HTML의 모든 태그들의 부모 요소이므로, 해당 태그에 특정 스타일을 지정하면 모든 태그 요소에 해당 스타일이 상속되어 지정된다.
단, 배경색, 배경 이미지는 스타일 상속이 되지 않는다.
This content is licensed under
CC BY-NC 4.0
댓글남기기