CSS가 없던 시절의 인터넷

시민 앱 제작 3차시 — 웹 구조 이해의 원천기술

회색 배경, Times New Roman, 파란 밑줄

1993년의 웹사이트를 상상해 보세요. 모든 웹사이트가 똑같은 모습이었습니다:

회색 배경(#C0C0C0), Times New Roman 폰트, 파란색 밑줄 링크. 이것이 전부였습니다. 왜? HTML에는 디자인 기능이 없었기 때문입니다. HTML은 "이건 제목이고, 이건 문단이야"라고 구조만 알려줄 뿐, "제목을 빨간색으로 해줘"라고 말할 방법이 없었습니다.

호콘 비움 리: "디자인을 분리하자"

1994년, 노르웨이 출신의 컴퓨터 과학자 호콘 비움 리(Hakon Wium Lie)가 혁명적인 제안을 합니다. 당시 그는 CERN에서 팀 버너스리와 함께 일하고 있었습니다.

그의 아이디어는 단순했습니다:

"문서의 구조(HTML)와 디자인(스타일)을 분리하자. 별도의 스타일 시트에서 색상, 폰트, 레이아웃을 지정하면 된다."

이것이 CSS(Cascading Style Sheets)의 탄생입니다. "Cascading"은 폭포처럼 위에서 아래로 스타일이 적용된다는 뜻입니다.

같은 뼈대, 완전히 다른 옷

CSS의 위력을 가장 잘 보여주는 프로젝트가 있습니다. CSS Zen Garden(2003)이라는 웹사이트는 HTML 코드는 단 한 줄도 바꾸지 않고, CSS만 바꿔서 수백 가지 완전히 다른 디자인을 보여줍니다.

이것은 마치 같은 사람이 정장을 입으면 직장인, 운동복을 입으면 선수, 한복을 입으면 전통 느낌이 되는 것과 같습니다. HTML은 몸(뼈대), CSS는 옷(디자인)입니다.

위의 세 카드는 HTML 구조가 동일합니다. CSS 속성 두 줄만 바꿨을 뿐인데, 분위기가 완전히 달라집니다.

반응형 디자인: 한 번 만들어 어디서든

2010년, 이단 마르코트(Ethan Marcotte)가 반응형 웹 디자인(Responsive Web Design)이라는 개념을 발표합니다. CSS의 @media 쿼리를 사용하면, 같은 웹사이트가 PC에서는 3단 레이아웃, 태블릿에서는 2단, 스마트폰에서는 1단으로 자동 변환됩니다.

바이브 코딩에서는 AI에게 "모바일 반응형으로 만들어줘" 한마디면 이 모든 것이 자동 적용됩니다.