프런트엔드 개발자가 꼭 알아야 하는 지식 - CSS 역사

안녕하세요! 이번에는 저번 포스팅(프런트엔드 개발자가 꼭 알아야 하는 지식 - HTML 역사)에 이어서 CSS 역사를 알아보겠습니다.

🔥 초창기의 CSS 🔥

1990년에 팀 버너스리가 최초로 HTML 초안을 발표한 후 HTML은 널리 사용되기 시작했습니다. HTML은 각각의 단편적인 정보에 연속성과 연결성을 부여하여 시각적으로 표현한 획기적인 언어였고 웹 브라우저라는 응용 프로그램을 통해서 실현될 수 있었습니다.

팀 버너스리는 당시 HTML을 고안하면서 HTML 문서를 잘 보여줄 수 있는 방법, 즉 디자인을 입히는 방법에 대해서도 고민했습니다. 그리고 자신이 만든 ‘월드와이드웹(이후 넥서스로 이름이 바뀜)’ 브라우저에 간단한 스타일 시트 처리를 하여 HTML로 작성한 웹 페이지에 시각적인 디자인을 입혔습니다.

하지만 팀 버너스리는 ‘월드와이드웹’에 내장된 스타일 시트를 공개하지는 않았습니다. 웹 페이지를 꾸미는 디자인적인 역할을 하는 스타일 시트는 자신이 정하는 게 아니라 이후 생겨날 여러 브라우저에서 자체적으로 결정해야 한다고 생각했기 때문입니다.

팀 버너스리의 바램이 통한 걸까요? 이후 탄생한 브라우저들은 저마다 웹 페이지를 보여주기 위한 스타일 시트를 자체적으로 내장하여 출시했습니다. 하지만 곧 HTML 태그가 디자인을 위한 용도로 변질되는 부작용을 초래하게 됩니다.

🔥 CSS의 탄생 🔥

이러한 스타일 시트의 발전 과정을 지켜보던 하콤 비움 리(Hakon Wium Lie)는 HTML 언어는 오직 정보를 의미론적으로 구조화 하는 역할만 해야 하며, 시각적인 디자인을 위한 기능까지 담당하면 안 된다고 생각했습니다. 그래서 1994년 10월 10일, ‘Cascading HTML style sheets’ 아이디어를 제안했습니다.

이러한 아이디어를 같은 해 8월 아르고(Argo)라는 브라우저를 개발하여 운영하고 있던 버트 보스(Bert Bos)가 긍정적으로 보게 되면서 하콤 비움 리의 계획에 동참하기로 결정하는데, 이때 이미 아르고 브라우저에는 범용적인 스타일 시트를 위한 기능이 탑재되어 있는 상태였습니다.

아르고에 탑재된 스타일 시트의 특징 중 하나는 HTML뿐만 아니라 XML과 같은 다른 언어에도 적용될 수 있을 만큼 범용적이라는 것이었습니다. 하콤 비움 리는 자신이 제안한 CSS도 단순히 HTML에만 제한적으로 적용되는 것이 아니라 범용적으로 적용되어야 한다는 생각에 자신이 최초로 제시한 ‘Cascading HTML style sheets’의 이름에서 HTML을 삭제하면서 오늘날의 CSS 어원인 ‘Cascading style sheets’라는 이름이 탄생하게 되었습니다.

이후에 하콤 비움 리와 버트 보스는 지속적으로 CSS 기술에 대한 협업을 진행했으며 같은 해 11월 시카고에서 열리는 웹 컨퍼런스에서 공개적으로 CSS에 대한 아이디어를 발표하기에 이릅니다.

이후 1995년에 4월에 열린 웹 컨퍼런스에서 다시 한 번 CSS가 발표되었으며, 이때 버트 보스는 아르고 브라우저에 CSS를 직접 적용하여 시연하고, 하콤 비움 리도 아레나(arena) 브라우저를 통해서 CSS를 직접 적용하여 시연했습니다.

이후 CSS는 지속적으로 초안과 개정안을 발표하기에 이르렀고, 결국 1996년 W3C에서 CSS 레벨 1이 표준 권장 사항으로 승인이 되면서 오늘날까지 이어지게 되었습니다.

🔥 인물 노트 - 하콤 바움 리 🔥

하콤 비움 리는 팀 버너스리가 근무하던 유럽 입자 물리 연구소 소속의 직원으로 일했으며, 최초로 CSS에 대한 아이디어를 제시하여 오늘날 CSS의 아버지라고 불립니다.

하콤 바움 리가 1994년 최초로 제안했던 CSS 아이디어는 당시엔 부족한 점이 매우 많았지만, HTML은 의미론적인 구조를 나타내는 용도 이외로는 변질되지 않아야 하며, 이를 위한 특별한 매커니즘이 필요하다는 인식을 알릴 수 있는 계기가 되었습니다.

하콤 비움 리의 CSS 제안서 내용은 https://www.w3.org/People/howcome/p/cascade.html 사이트에서 확인할 수 있습니다.

이렇게해서 CSS의 역사도 간단하게 살펴보았는데요! 이 포스팅을 통해서 CSS가 어떤 역사적 배경 속에서 탄생하게 되었는지 알게 되셨죠? 이러한 역사는 각 언어를 공부하는 데 필수는 아니지만 알아두면 조금 더 재미있게 언어를 배울 수 있습니다!😊

이 밖에도 더 많은 프런트엔드 기술과 관련 정보, 로드맵이 궁금하시다면!

제가 이번에 집필한 <아는 만큼 보이는 프런트엔드 - 한 권으로 보는 프런트엔드 로드맵과 학습 가이드> 에서 조금 더 확인해 보실 수 있습니다!

🚀 교보문고: http://gilbut.co/c/23091331Eo

🚀 YES24: http://gilbut.co/c/23098124bF

🚀 알라딘: http://gilbut.co/c/23098896Pw