🎨 CSS란?
Cascading Style Sheet의 약자인 CSS는 흔히 HTML 구조를 스타일링하는 목적으로 사용한다. 즉 CSS는 마크업 언어가 표시되는 방법을 기술하는 언어라고 할 수 있다. 이름에서도 알 수 있듯이 CSS의 원리를 한 단어로 표현한다면 Cascading이라고 할 수 있다. Cascading의 사전적 정의는 다음과 같다.
💡 Cascading이란?
: 위에서 아래로 흐르는
: 상속 또는 종속하는
사전적 정의를 바탕으로 CSS의 동작 방식을 설명하면 다음과 같다.
💡 CSS의 원리
(1) 우리가 지정한 스타일링(Author Style)이 없으면
(2) 사용자가 지정한 스타일링(User Style)이 없으면
(3) 브라우저(Broswer)가 지정한 기본 스타일링으로 흐르는 구조
이처럼 CSS의 동작 방식은 말 그대로 폭포처럼 위에서 아래로 흐른다. 구체적으로 살펴보면 먼저 직접 작성한 스타일 시트, CSS 파일이 가장 높은 우선 순위를 갖는다. 만약 사용자가 다크 모드를 설정하는 등 스타일링을 지정했다면 CSS는 그것을 덮어씌운다. 혹시 CSS 파일이나 사용자의 지정 스타일링이 존재하지 않는다면 CSS는 최종적으로 브라우저의 기본 스타일링을 따르게 된다.
⭐ 쓰기 전에 잠깐!
앞서 살펴봤듯이 CSS는 스타일 시트를 덮어씌우는 Cascading 원리로 동작한다. 하지만 덮어씌워지는 스타일 시트가 계속 늘어난다면 어떻게 될까? 당연히 렌더링 시간이 오래 걸릴 수밖에 없고, 이는 성능 저하를 초래한다.
물론 요즘은 고사양의 컴퓨터가 보편화되었기 때문에 스타일 시트 개수가 좀 많아진다고 하더라도 크게 성능 저하가 체감되지는 않는다. 그러나 우리는 항상 웹 접근성을 생각해야 한다. 아무리 고사양 환경이 보편화되었다고 해도 저사양 환경에서 접속하는 사용자가 아예 없는가? 그렇지 않을 것이다. 그러므로 CSS를 작성할 때도 보편의 가치를 고려하려면 쓸데없는 스타일 시트의 남용이나 오용을 최대한 지양할 필요가 있다.
😲 점점 발전하는 CSS
CSS의 첫 번째 버전인 Level 1은 그래픽 요소를 조작하는 언어가 맞나 싶을 정도로 정말 빈약했다. 그러나 CSS Level 2에서는 많은 CSS 속성들이 추가되어 그래픽 요소를 다양하고 강력하게 조작할 수 있게 되었다.
현재 발전하고 있는 CSS Level 3는 Level 1, Level 2와 달리 모든 명세가 포함된 버전이 아니라 표준화가 모듈 단위로 진행되고 있다. 모듈 단위의 CSS 발전 방식은 웹 표준 개발 단계에 따르는데, 이에 대해 간략하게 설명하면 다음과 같다.
💡 웹 표준 개발 단계
(1) Draft(초안)
(2) Working Draft(작업 초안)
(3) Candidate Recommendation(권고 후보)
(4) Proposed Recommendation(최종 권고안)
(5) Recommendation(권고안)
이미 Recommendation 단계에 다다른 모듈도 있지만, 몇몇 모듈은 Work Draft 단계에 머물러 있기도 하다. 표준화 현황은 다음의 링크에서 참고할 수 있다.
💡 CSS 표준화 진행 상황
이처럼 모듈 단위로 발전되고 있다는 특징 때문에 CSS의 특정 기능을 사용하기 전에는 항상 렌더링할 브라우저가 그 기능을 지원하는지 그 여부를 확인할 필요가 있다. 브라우저별 CSS 기능 지원 여부는 다음의 링크에서 확인할 수 있다.
💡 브라우저별 HTML, CSS 기능 지원 여부
만약 브라우저가 사용하려는 CSS 기능을 지원하지 않는다면 다른 방법으로 접근해야 한다. 예를 들어 grid가 지원되지 않는 환경이라면 flex, float, position 등을 적절히 활용하여 grid를 대체할 수 있을 것이다. 그러므로 성능, 브라우저 등의 상황과 여건을 고려하여 다양한 CSS 스타일링 방법 중에서 합리적인 것을 선택할 수 있는 판단력을 기르는 것이 중요하다.
😉 CSS, 현명하게 사용하자!
지금까지 살펴본 것처럼 CSS는 스타일링에 특화된 언어다. 하지만 단순히 스타일링이 가능하다는 점에서 그치지 않고, 문서의 구조와 표현을 분리함으로써 구조의 변경 없이 CSS의 변경만으로 다양한 표현이 가능하다는 의의를 갖는다. 이러한 의의를 잘 보여주는 사이트가 있어서 첨부하고자 한다.
💡 CSS ZenGarden
위의 사이트로 들어가면 전세계의 개발자들이 똑같은 마크업을 바탕으로 무궁무진하게 스타일링해놓은 예시를 볼 수 있다. 이처럼 CSS는 스타일링의 방법이 한정적이지 않다는 점이 매력적이다. 그러나 CSS의 의의를 단순히 예쁘게 꾸미는 것으로만 바라보아서는 안 된다. 웹 접근성에 근거하여 어떤 방식으로 구현했을 때 UX를 향상시킬 수 있는지 항상 고민할 필요가 있다.
