1996<CSS>
툴로 읽는 디자이너의 진화 1.0
인터넷이 처음 등장했던 시대, 웹은 단순한 텍스트 문서를 공유하기 위한 공간이었다. 1990년대 초반 팀 버너스-리(Tim Berners-Lee)에 의해 만들어진 하이퍼텍스트 마크업 언어(HTML)는 웹 문서의 구조와 내용을 정의했지만, 그것만으로는 부족했다. 사람들은 같은 내용을 다양한 방식으로 표현하고 싶었고, 이러한 요구 속에서 1994년 노르웨이 웹 개발자 하콘 비움 리(Håkon Wium Lie)가 혁신적인 개념을 제안했다. 바로 계단식 스타일 시트(Cascading Style Sheets, CSS)다. 당시 CERN(유럽입자물리학연구소)에서 팀 버너스-리, 로버트 카이유(Robert Cailliau)와 함께 일하던 그는 웹 문서의 스타일과 내용을 분리하는 새로운 방식을 고안했다. 이 아이디어는 단순해 보이지만, 웹 개발의 역사를 완전히 바꾸어 놓은 혁명적인 기술이었다. 그리고 css의 출현으로 디자이너가 도화지 위에 그림을 그리는 것을 넘어 컴퓨터 언어를 이용해 웹에 디자인 영역이 확장되는 기념비적 출현이다.
CSS의 탄생: 필요성과 첫 발걸음
HTML만으로 웹 페이지를 만드는 것이 얼마나 불편했는지 이해하려면, 초기 웹의 상황을 되짚어봐야 한다. 초창기 HTML에는 스타일을 입히는 기능이 거의 없었다. 글자를 굵게 하려면 매번 <b>태그를 붙여야 했고, 색을 바꾸려면 <font>태그를 사용해야 했다. 이렇게 하면 같은 스타일을 여러 곳에 반복해서 입혀야 했으므로 유지보수가 어려웠다. 또한 하나의 콘텐츠를 다양한 환경에서 다르게 표현하고 싶을 때도 마찬가지였다. 모바일 기기가 없던 시대였지만, 서로 다른 해상도의 모니터에서 같은 웹 페이지를 적절하게 표현할 필요는 있었다. 하콘 비움 리가 제시한 CSS의 핵심 개념은 간단했다. HTML에서는 문서의 의미와 구조만 표현하고, 어떻게 보일지는 별도의 스타일 시트에서 정의하자는 것이다. 이를 통해 같은 내용을 여러 가지 디자인으로 표현할 수 있게 되었고, 스타일의 중복을 제거할 수 있었다.
1994년 10월에 처음 제안된 CSS는 1996년 12월 W3C(World Wide Web Consortium)에 의해 공식적인 웹 표준으로 채택되었다. 이것이 바로 CSS1이다. CSS1은 약 50개의 기본 속성을 포함했는데, 글꼴의 종류와 크기 설정, 텍스트와 배경색 변경, 여백과 패딩 조정 같은 기본적인 스타일링 기능만을 제공했다. 하지만 이것도 웹 개발자들에게는 획기적인 도구였다. CSS1이 세상에 나온 직후 하콘 비움 리는 CSS를 구현한 최초의 웹 브라우저인 아레나(Arena)를 개발했다. 이 브라우저는 CSS의 개념을 실제로 보여주는 중요한 증거였고, CSS가 실제로 작동할 수 있다는 것을 증명했다.
CSS의 발전: 기능의 확장과 웹의 성장
시간이 흘러 1998년 5월에는 CSS2가 등장했다. CSS2는 CSS1의 단순함을 넘어서 본격적인 레이아웃 기능을 추가했다. 위치 지정(positioning) 기능이 도입되어 요소를 정확하게 배치할 수 있게 되었고, 미디어 타입에 따른 다양한 스타일링도 가능해졌다. :hover와 같은 의사 클래스(pseudo-class)가 처음 소개된 것도 이 시기였다. 또한 스타일 속성값으로 inherit을 사용할 수 있게 되어, 부모 요소로부터 스타일을 상속받는 것이 더욱 체계화되었다. CSS2는 웹이 단순한 문서 공유 플랫폼에서 점차 애플리케이션으로 발전해 나가는 과정을 반영했다. 2011년에는 CSS 레벨 2 개정 1판(CSS2.1)이 공식화되었다. 이것은 CSS2의 오류를 수정하고 명확하게 한 버전이었다. 특히 인터넷 익스플로러 8에서 비로소 CSS2.1을 완전히 지원하기 시작했을 정도로, CSS 표준의 정착에는 긴 시간이 필요했다.
CSS3의 탄생과 모듈화의 시작
1999년, CSS3 초안이 공식화되면서 웹 스타일링은 새로운 차원으로 나아갔다. CSS3는 이전 버전들과 근본적으로 달랐다. CSS1과 CSS2가 하나의 큰 명세서로 관리되었다면, CSS3부터는 기능별로 모듈화되기 시작했다. 색상 모듈, 선택자 모듈, 폰트 모듈 등 각각의 기능이 독립적인 명세서로 관리되는 방식이었다. 이러한 변화는 CSS가 제공할 수 있는 기능의 범위가 너무 커져서, 하나의 문서로 관리하기 어려워졌기 때문이었다. CSS3는 그림자 효과와 그라디언트, 애니메이션, 변형 효과 같은 화려한 기능들을 제공했다. 둥근 모서리(border-radius), 반투명성(opacity), 다중 열(multi-column) 레이아웃 같은 것들이 처음 등장했다. 또한 여러 개의 배경 이미지를 한 요소에 적용할 수 있게 되었고, 다양한 폰트를 웹에서 직접 사용할 수 있는 기능도 추가되었다. CSS3의 가장 큰 변화는 웹이 단순한 문서에서 인터랙티브한 애플리케이션으로 발전하는 것을 따라가기 시작했다는 점이었다.
CSS3의 시대에 웹 개발 방식도 급격하게 변했다. 백엔드에서 완성된 HTML을 보내주는 것이 아니라, 프론트엔드에서 자바스크립트(JavaScript)를 이용해 HTML과 CSS를 함께 작성하는 방식으로 전환되었다. 이러한 변화는 CSS에 새로운 과제를 안겨주었다. 컴포넌트 기반의 개발 방식이 등장하면서, CSS의 전역 스코프(Global Scope) 문제가 심각해졌다. 이전처럼 단순하게 선택자를 통해 스타일을 관리할 수 없게 된 것이었다. 개발자들은 이 문제를 해결하기 위해 BEM(Block Element Modifier)과 같은 명명 규칙을 사용하거나, Sass 같은 전처리기(Pre-processor)를 도입했다.
현대적 레이아웃 기술의 등장: Flexbox와 Grid
웹 애플리케이션의 폭발적인 성장으로 인해 레이아웃 기술에 대한 요구사항이 급증했다. 플렉스박스(Flexbox)는 2013년에 정식 스펙으로 등장했다. 비록 그 개념과 논의는 훨씬 이전부터 있었지만, 모든 주요 브라우저에서 일관되게 지원하기까지는 시간이 걸렸다. 플렉스박스는 일차원(1D) 레이아웃, 즉 가로 또는 세로 한 방향으로 요소들을 정렬하는 데 최적화되었다. 요소들의 크기와 순서를 유연하게 조정할 수 있게 되어, 반응형 웹 디자인이 한결 수월해졌다. 플렉스박스가 등장한 직후 CSS Grid Layout이 선보였다. 2017년 드디어 Grid Layout이 모든 주요 브라우저에서 동시에 지원되기 시작했다. Grid는 이차원(2D) 레이아웃을 제공하여, 행(row)과 열(column)을 동시에 조정할 수 있게 해주었다. 이를 통해 신문이나 잡지 같은 복잡한 레이아웃을 웹에서도 쉽게 만들 수 있게 되었다.
Web Development History - Progress of Web in Detail - Intlum현재의 CSS와 모던 웹 기술
2017년은 또 다른 중요한 변화가 일어난 해였다. CSS 변수(CSS Variables), 정식으로는 맞춤형 속성(CSS Custom Properties)이 모든 주요 브라우저(인터넷 익스플로러 제외)에서 지원되기 시작한 것이다. CSS 변수를 통해 색상, 크기, 폰트 같은 값을 한 곳에서 관리할 수 있게 되었다. 이는 Sass 같은 전처리기에서만 가능했던 기능을 순수 CSS에서도 실현한 것으로, 개발자들이 더 이상 추가 도구 없이도 효율적으로 스타일을 관리할 수 있게 되었다. 그리고 2017년 또 다른 변화가 있었다. 테일윈드 CSS(Tailwind CSS)의 등장이다. 이것은 기존의 CSS 패러다임을 완전히 뒤집는 접근 방식이었다. 테일윈드 CSS는 유틸리티 퍼스트(Utility-First) 방식을 철저하게 밀어붙였다. 이전까지 개발자들이 암암리에 사용하던 방식을 전면화한 것이었고, 이는 처음에 큰 반발을 받았지만 지금은 가장 인기 있는 CSS 프레임워크가 되었다.
동시에 CSS-in-JS라는 새로운 움직임도 활발했다. 자바스크립트에서 CSS를 직접 작성하고 관리하는 방식으로, 스타일드 컴포넌트(Styled Components)와 이모션(Emotion) 같은 라이브러리들이 등장했다. 이 방식은 자바스크립트의 강력한 기능을 CSS에 더할 수 있다는 장점이 있었다. CSS의 전역 스코프 문제를 자바스크립트의 모듈 시스템으로 해결할 수 있었기 때문이다.
현재 2025년의 CSS는 과거와는 비교할 수 없을 정도로 강력해졌다. 셀렉터 쿼리(:has()), 컨테이너 쿼리(Container Query), 서브그리드(Subgrid) 같은 고급 기능들이 브라우저에서 널리 지원되고 있다. CSS도 living standard 방식으로 관리되고 있어, HTML처럼 공식적인 버전 번호 없이 지속적으로 발전하고 있다. 이제 CSS4, CSS5라는 분류는 커뮤니티에서 비공식적으로 사용되고 있을 뿐이다. CSS3 이후 추가된 기능들을 CSS4(2013~2018), CSS5(2019~2024), CSS6(2025 이후)로 나누는 것은 웹 개발 커뮤니티가 CSS의 발전을 더 잘 이해하기 위한 노력일 뿐이다.
CSS의 미래와 의미
CSS의 발전 과정을 보면서 우리는 웹 기술이 어떻게 진화해왔는지를 알 수 있다. 처음에는 단순한 문서 스타일링 도구였던 CSS가, 이제는 복잡한 사용자 인터페이스, 반응형 디자인, 심지어 애니메이션과 상호작용까지 담당하는 포괄적인 기술이 되었다. 개발자들은 CSS의 제한을 극복하기 위해 전처리기를 만들었고, 자바스크립트와 결합했으며, 새로운 방법론을 개발했다. 이러한 모든 노력은 웹을 더 아름답고 더 기능적으로 만들기 위한 것이었다.
웹의 초기부터 지금까지의 여정을 돌아보면, CSS는 단순한 기술 이상의 의미를 갖는다. 그것은 웹이 어떻게 진화해왔는지를 보여주는 살아있는 역사이며, 웹 개발자들의 창의성과 문제 해결 능력의 결정체다. 하콘 비움 리가 1994년에 제안한 계단식 스타일 시트라는 개념은, 삼십 년이 지난 지금도 여전히 웹의 중심에서 빛나고 있다. 그리고 앞으로도 CSS는 웹 기술의 발전과 함께 계속 진화해 나갈 것이다. 그 변화의 과정은 고민스럽기도 하고 때로는 답답하기도 하겠지만, 그 속에서 개발자들의 열정과 웹을 향한 사랑이 담겨 있다는 점이 가장 감동적인 부분이다.
