CSS는 왜 이름이 CSS일까?

 

기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다.

CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다.

 

프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만

정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다.

---

CSS는 뭘까?

CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다.

HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성해야 합니다.

 

 

이 때 전체적인 구조는 rule set이라고 불리며, 각 부분에는 명칭과 역할이 있습니다.

• 선택자 (selector) : html 요소 이름으로, 꾸밀 요소들을 선택합니다
• 선언 : 단일 규칙으로, 꾸미기 원하는 요소의 속성을 명시합니다.
• 속성 (property) : html 요소를 꾸밀 수 있는 방법으로, color, background-color 등 다양한 속성이 있습니다.
• 속성 값 : 속성의 오른쪽에 값을 작성합니다.

---

Cascading이란?

cascading은 '폭포, 위에서 아래로 쏟아지는' 이라는 뜻을 가지고 있습니다.

---

CSS는 Cascading Style Sheet

The cascade is an algorithm that defines how user agents combine property values originating from diffrent sources.

 

CSS는 이름 안에 Cascading이 있습니다.

Cascading이라는 단어가 위에서 아래로 쏟아지는 이라는 뜻을 가지고 있는 것처럼, CSS가 가지고 있는 가장 중요한 스타일 적용 규칙이 바로 Cascading입니다.

 

폭포가 위에서 아래로 흐르며 물이 맨 아래에 모이는 것처럼, 최종적으로 적용할 CSS 속성들을 결정할 때 우선 순위에 따라 합쳐져 적용됨을 의미합니다. 이 때 우선 순위가 높은 규칙일수록 우선적으로 속성이 적용되며, 몇 가지 원칙들을 통해 실제 요소에 적용될 스타일이 결정됩니다.

 

 

Cascading Order

1. Relevance

 

주어진 요소에 적용된 규칙만을 따른다는 원칙입니다. 

수많은 규칙들 중에서 주어진 요소에만 적용되는 규칙만을 필터링합니다.

 

2. Origin and importance

 

중요도에 따라 규칙들의 순서를 정합니다.

만약 !important 표기가 되어있는 규칙이라면 가장 높은 우선순위를 부여합니다.

 

3. Specificity

 

CSS selector 표현 방법을 숫자 4자리로 표현한 후, 그 숫자가 큰 순서대로 우선순위를 결정합니다.

• 천 자리 : inline
• 백 자리 : id
• 십 자리 : class
• 일 자리 : tag

예시

#myElement { color: green; /* 1-0-0 - WINS!! */ }
.bodyClass .sectionClass .parentClass [id="myElement"] { color: yellow; /* 0-4-0 */ }

 

 

4. Scoping proximity

 

스타일이 어떤 범위에서 정의되었는지에 따라 결정되며, 스타일 규칙 충돌 시 가장 가까운 범위에 정의된 규칙이 적용됩니다.

• global scope : <style> 또는 외부 스타일 시트 파일
• local scope : inlne, class 등

5. Order of appearance

 

작성된 코드 순서에 따라, 코드에서 가장 마지막에 등장한 속성이 적용됩니다.

 

---

정리

CSS는 Cascading Style Sheet의 준 말이며,

Cascading이라는 스타일 규칙을 따르는 Style Sheet 언어라는 뜻입니다.

 

용어 안에 해당 기술의 핵심적인 내용이 담겨 있음을 알 수 있었으며, 앞으로도 기술을 사용할 때는 이름이 가진 의미부터 알아보면 그 본질을 더 잘 알 수 있을 것 같다는 생각이 들었습니다.

 

 

---

참고 자료

1. CSS 기초
2. [CSS] Cascading
3. Introducing the CSS Cascade