1234
| CSS |
1234 |
|---|
HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어. CSS의 C가 Cascading[1]의 약자인데, 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜 주는 모습이 DOM 트리 구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 다만 예외로 마진, 패딩, 보더 등의 박스 모델 관련 속성은 상속되지 않는다. 물론 inherit값을 줘서 강제로 상속시킬 순 있다.
스타일 시트 언어이므로 일반적인 프로그래밍 언어와는 다른 종류의 기능을 하지만 HTML과 연결시키면 다음 코드로 Hello World를 출력할 수 있기도 하다.
과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML 안에 욱여넣다 보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는 <table> 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스 코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다.[2]
이에 따라 W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!"라는 목적으로 CSS를 발표했다. 거기에 따라 bgcolor 등과 같이 HTML에서 디자인에 관련된 요소들은 전부 사용하지 말 것을 권고하고 있다. CSS 발표 이후로 HTML 문서의 구조화를 도와주는 div, span, section 등의 새로운 태그가 도입되고 strike, font 등의 스타일 태그는 비권장 태그로 전환되다가 HTML5에서는 아예 삭제되었다. table은 표 형태의 데이터를 표현하는 용도에만 쓰도록 권고하면서 표의 구조화를 도와줄 thead, tbody 태그가 새로 소개되었다.
구조화된 HTML은 HTML 태그를 본연의 용도에 맞게 사용하는 것이다. 예를 들어 최상위 제목을 뜻하는 <h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 문단은 <p> 태그로 나눈다. 이렇게 하면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다. 여기서 '알아보기 쉽다'에는 사람(프로그래머)뿐만 아니라 기계(웹 브라우저)역시 포함된다. 기계가 이해하기 쉬운 HTML은 다양한 포맷으로 출력 형식을 바꾸기 용이하고(CSS 파일을 모바일용, PC용 등으로 각자 준비해 교체하는 방식으로 적용한다), 문서의 해독(파싱) 속도가 빨라지며 동적인 기능을 구현하기가 더 쉬워진다. 그리고 대부분의 경우 구조화된 HTML이 과거의 비구조화 HTML보다 문서 크기가 상대적으로 작다.
이렇게 하면 디자인에 필요한 부분은 CSS가 전담하기 때문에 용도의 구분이 보다 명확해지고, 웹 디자이너와 웹 프로그래머 간의 협업도 용이해진다. 게다가 CSS는 HTML 문서에 <style> 태그 안에 삽입할 수도 있지만 별도의 파일로 분리하는 것도 가능해서 다른 HTML에서도 동일한 CSS를 사용할 수 있다. 즉 웹 페이지를 제작할 경우 글꼴 등의 웹 페이지의 스타일을 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용을 한꺼번에 변경할 수 있어 일관성을 유지하고 작업시간도 줄이고 트래픽을 줄이는 효과도 있다.
단, CSS는 HTML을 완벽하게 습득한 상태라 할지라도 그 용법이나 문법에 상이한 차이를 가지고 있기 때문에 상당 시간의 연습과 실전 경험이 필요하다. Internet Explorer가 살아있던 시절, 특히 구버전(6~7)에서는 자신의 의도와는 다른 결과물을 출력하는 경우가 많았다. 이 때문에 구버전을 지원하기 위해 작업하다 보면 CSS에 각종 핵이 우후죽순으로 들어서기도 했다. CSS 2.1의 지원이 Internet Explorer 8에서야 제대로 이루어졌기 때문에 발생했던 일이다. Internet Explorer가 죽고 나서는 이 자리를 Safari가 꿰차게 되었다.