[CSS] Cascading, 캐스케이딩

지난 포스트에서 css에 대한 기본적인 것들을 알아보았습니다. 이번 포스트에서는 css의 핵심요소인 캐스케이딩 규칙에 대해서 알아보도록 하겠습니다.

 

Cascading, 캐스케이딩은 폭포, 위에서 아래로 쏟아지는이라는 의미를 가진 영단어입니다. 캐스케이딩 스타일 시트, 말 그대로 위에서 아래로 적용되는 스타일 시트라는 의미입니다. 

 

css의 맨 앞글자가 캐스케이딩인만큼, css에서는 캐스케이딩 원리가 가장 중요하게 적용됩니다. 

 

★ 왜 캐스케이딩 규칙이 중요한가?

html/css를 사용하다보면 한 태그에 여러 스타일이 겹쳐지는 경우가 발생합니다. 이럴경우에 어떤 스타일요소를 우선적용할지 결정하는 것이 캐스케이딩입니다. 그렇기때문에 캐스케이딩 개념에 대한 이해를 통해 요소의 적용을 하는 것이 중요합니다. 캐스케이딩은 다음 두가지의 원칙을 가지고있습니다.

1. 스타일 우선순위

2. 스타일 상속

 

---

[1] 스타일 우선순위 원칙

스타일 우선순위란 스타일 요소는 각각 우선순위를 가지고 있는데 이 우선순위에 따라서 스타일이 적용되는 것을 스타일 우선순위 원칙 이라고합니다.

 

캐스케이딩은 다음 3가지의 요소로 우선순위가 결정됩니다.

1. 중요도

2. 명시도

3. 코드 순서

 

1.  중요도 / Importance

중요도는 스타일이 선언된 위치에 따라 우선순위가 결정되는 것 입니다. 기본적으로 프로그래머의 스타일 시트에 우선권을 부여하고 사용자와 브라우저의 스타일 시트의 우선순위가 낮습니다. 중요도에 따른 우선순위는 다음과 같습니다.

[ 프로그래머 CSS > 사용자 CSS > 브라우저 CSS ]

 

+ 중요도를 올리기

중요도를 가장 먼저 끌어올릴 수 있는 명령어로 '!important'가 존재합니다. 사용법은 속성뒤에 !important만 붙여주면 됩니다.속성에 이 명령어를 붙일 경우 어떤 속성보다 최우선으로 적용되게 됩니다. 그래서 이 속성을 가장 중요하게 꼭 넣어야하는 경우에 이 명령어를 붙입니다.

 

다음 사진에서 왼쪽이 !important적용 전, 오른쪽이 !important적용 후 입니다. 마지막에 코드 순서에서 설명하겠지만 css는 나중에 온 속성이 우선순위를 갖는데, !important를 통해 색상이 먼저 온 속성인 red가 적용되고, !important를 주지않은 폰트속성은 나중에 온 속성인 normal이 적용되었음을 볼 수 있습니다.

!important

---

2. 명시도 / Specificity

명시도란 셀렉터(선택자)에 따라 우선순위가 달라지는 것입니다. 명시도라는 단어의 뜻에 맞게 셀렉터의 의미가 정확해 질수록 높은 우선순위를 갖습니다. 쉽게 말해 스타일이 적용되는 범위가 좁다면 우선순위가 높다는 것 입니다. 그러므로 명시도에 따른 우선순위는 다음과 같습니다.

[ 인라인 > id > class > 태그 ]

1. 인라인	태그안에 인라인 스타일속성을 통해 넣은 스타일요소 입니다. 특정한 하나의 태그에만 적용되므로 가장 높은 명시도를 가지므로 가장 우선으로 적용됩니다.
2. id	문서에서 한 번만 쓰일 수 있는 속성인 id가 우선순위를 먼저 갖습니다. 샾(#)으로 id를 지정하여 사용합니다.
3. class	문서에서 여러번 쓰일 수 있는 속성인 class가 우선순위를 다음으로 갖습니다. 점(.)으로 클래스를 지정하여 사용합니다.
4. 태그	태그란 말그대로 span, div, h1 이런 태그를 의미하며 구체적이지 않고 태그 전체를 지정하므로 가장 낮은 우선순위를 가지게 됩니다.

※ id와 class : id와 class는 둘다 문서의 특정 부분을 지정할 수 있게 해주는 속성입니다. 다음 포스트에서 셀렉터들의 소개와 사용법을 통해 자세한 내용을 기술하겠습니다.

 

 

다음 사진에서는 같은 h1태그라도 선택자에 따른 우선순위를 보여줍니다.

명시도

---

3. 코드  순서 / Source Order

우선 순위를 결정하는 또 다른요소는 바로 코드 순서입니다. 코드 순서라는 것은 코드에서 나중에 온 속성이 최우선으로 적용된다는 것입니다. 위에서 아래로 실행된다는 프로그래밍의 기본원리를 생각하신다면 이해하기 쉬울 것 입니다.

다음 사진에서는 같은 태그 셀렉터라도 나중에 온 초록색/아주작은 글자가 적용되었음을 보여줍니다.

코드 순서

---

[2] 스타일 상속 원칙

스타일 상속 원칙은 태그들의 포함 관계로 스타일을 적용하는 원칙입니다. 바깥에 있는 태그가 부모 요소, 그 안에 포함된 태그들을 자식 요소라고 하는데, 일반적으로 부모 요소의 스타일을 자식 요소들이 받아서 갖게 됩니다. 이것을 상속이라고 하며, 부모 요소의 스타일을 자식 요소가 그대로 받는것이 스타일 상속 원칙입니다.

 

다음 사진에서 <p>태그는 부모 요소, <b>태그는 자식 요소입니다. <p>태그에만 글자색 'red'속성을 주었는데 그 안에 포함된 자식 요소 <b>태그에도 'red'속성이 적용된 것을 확인할 수 있습니다.

---

이번 포스트에서는 캐스케이딩에 대해서 알아보았습니다. 우선순위에 따라서 적용되는 스타일 요소가 다르기 때문에 css를 적용할 때 항상 염두해 두어야합니다.