CSS가 없던 시절의 문제

CSS란 무엇인가?

CSS는 Cascading Style Sheets의 약자이다. 한글로 하면 '계단식 양식 문서들' 이란 어색한 해석이 된다. 왜 이런 이름이 지어 졌는지 궁금하면 지난 포스팅 글인 'CSS는 왜 Cascading Style Sheet일까?'를 참고하도록 하자. CSS는 다음의 특징들을 갖는다.

• CSS는 HTML 요소를 화면, 종이 또는 다른 매체에 표시하는 방법을 설명한다.
• CSS는 많은 작업을 저장하여, 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있다.
• HTML 내부에 삽입된 CSS가 아닌 외부 스타일 시트는 CSS 파일에 저장된다.

CSS를 어디에 쓰지?

CSS는 디자인, 레이아웃 및 다양한 장치 및 화면 크기에 대한 디스플레이의 변형을 포함하여 웹 페이지의 스타일(양식)을 정의하는 데 사용된다.

CSS가 없던 시절의 문제

초기 HTML은 웹 페이지의 형식을 지정하기위한 태그를 포함하지 않았다. HTML은 다음과 같이 웹 페이지의 내용을 설명하기 위해 작성되었다.

<h1> 제목 </ h1>
<p> 단락 </ p>

하지만 <h1>font</ h1>와 같은 태그와 색상 속성이 HTML 3.2 사양에 추가되면 웹 개발자에게는 악몽이 시작된다. 모든 단일 페이지에 글꼴과 색 정보가 추가 된 대형 웹 사이트 개발은 야근과 노가다의 연속이 되버린다. 가령 500개 페이지의 글자 색상 하나만 변경하려고 한다고 해도 모든 페이지에 대해 일일이 작업해야 하는 것이다.

이 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 CSS를 만들었다. 이렇게 만들어진 CSS는 HTML 페이지에서 스타일 서식을 가차없이 제거해버렸다. 오~ 굿~! 내용과 스타일을 분리한 것이다.

CSS로 많은 작업을 절약 할 수 있다!

스타일 정의는 일반적으로 외부 .css 파일에 저장된다. 물론 HTML의 헤더 부분이라던가 태그 안에 쓸 수도 있지만 보통은 외부 파일에 따로 만들어서 쓰는게 작업하기 편리하고 관리도 용이하다. 

외부 스타일 시트 파일을 사용하면 하나의 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있다! 위에서 얘기했던 500개 페이지를 모두 변경할 필요가 없는 것이다. 500개 HTML에서 참조된 단지 1개의 CSS파일만 변경하면 되는것이다.

정리

CSS는 HTML에서 내용과 스타일을 분리하기 위해 만들어진 웹페이지의 스타일 서식이다.