[웹] HTML/CSS #2 :: CSS란?

CSS는 Cascading Style Sheet의 약자다. Cascading은 사전을 찾아보면 '폭포같은, 연속적인, 계속되는'으로 나온다. 스타일 시트는 말 그대로 스타일을 꾸미는 시트다. 벽에 시트지를 붙여서 꾸미는 것처럼, HTML에 꾸미는 시트를 붙이는 파일 형식이다. 앞에 Cascading이란 붙은 이유는 웹 브라우저의 특성 때문. 웹 브라우저는 CSS 파일을 위에서부터 아래로 읽는다. CSS를 열어보면 HTML의 이 내용은 이렇게 꾸미고, 저 내용은 저렇게 꾸미라는 코드가 들어있다. 예를 들어 "이미지는 가로는 160 픽셀, 텍스트는 폰트 굵기는 300, 색깔은 빨간색, 배경은 초록색으로 해라"라는 식이다. 실제로 거의 모든 웹사이트에서 이런 명령어들은 상당히 많고, 개중에 겹칠 수도 있다. 물론 CSS 문법 선에서 겹치는 부분을 처리할 수 있게 되어있긴 하다. 하지만 만약의 겹칠 경우 CSS의 가장 아래 부분이 적용된다. 예를 들어 <p> 태그의 색깔을 빨간색으로 하라는 CSS 명령이 위에 있고 파란색으로 하라는 명령이 아래에 있다고 해보자. CSS를 읽는 웹 브라우저는 위에서부터 쭉 읽다가 빨간색 명령어를 만나면 <p>를 빨간색으로 바꾼다. 그리고 쭉 내려가면서 읽다가 파란색 명령어를 만나면 <p>를 파란색으로 바꾼다. 결국 아래에 있는 파란색 명령어가 최종적으로 적용되는 서식이 된다.

HTML 상에서도 컨텐츠를 꾸밀 수 있는 기능이 있다. 하지만 대부분의 웹에서는 CSS를 따로 지정해두고, HTML 파일과 CSS를 연결해서 사용한다. HTML의 헤드 부분에 CSS 링크를 걸어두면 브라우저가 HTML을 읽다가 해당 명령어를 발견하고 링크된 CSS를 불러와서 적용하는 식. 이렇게 하는 이유는 편하니까. 내용이 사람이라면 CSS는 옷이다. HTML 자체에서 스타일을 적용하는 건 사람을 꾸미려고 문신을 하는 것에 비유해도 좋을 것 같다. 정말 맘에 드는 청바지가 있어서 그 모양으로 하체에 문신을 했다고 치자. 언젠가 질릴 것이다. 이제 슬랙스가 입고 싶다. 슬랙스 모양의 문신을 다시 하려면 몸이 망가질 수도 있고 어렵다. 내 몸은 맨 몸 그대로 두고 옷만 갈아입는 게 편하다. 웹사이트도 마찬가지다. HTML과 CSS를 분리하면 내용은 그대로 두고 디자인을 변경할 수 있다.

HTML에서 태그들로 내용을 구성하면, CSS에서 태그를 지정해 스타일을 정의한다. 보다 디테일한 수정을 위해 태그에 아이디나 클래스 같은 속성을 지정할 수도 있다. 마찬가지로 CSS에서 특정 아이디나 클래스를 지정한다. HTML에서 어떤 태그를 사용하는지를 알면 되는 것처럼 CSS에서도 문법만 알면 원하는 대로 HTML을 꾸밀 수 있다. 암기의 영역. 지난 포스팅에서 말 못했던 건데 에디터를 사용하면 이 암기의 노력마저 줄어든다. 적당히 작성하면 자동완성으로 필요한 내용을 추천해준다. 대충 어느 기능이 있는지 정도만 알고 있으면 자세한 사용법은 알아서 프로그램이 추천해주는 걸 고르면 된다. 그만큼 학습에 필요한 투자가 적다. 나 같은 경우에도 HTML과 CSS 합쳐서 한 달 정도만에 끝내고 바로 개인 홈페이지를 만들어봤다. 물론 반응형으로. 내 홈페이지에는 안 썼지만 반응형 웹사이트마저도 부트스트랩을 쓰면 너무 간편하다. 

쓰고보니 HTML과 CSS를 한 포스팅에 쓸 걸 그랬나 싶을 정도로 간단하다. 실제로 HTML과 CSS는 한 묶음이라고 보면 된다. 사람이 옷 안 입고 다니는 일은 없는 거랑 비슷하다. 책들도 대개 두 언어를 동시에 담고 있다. 물론 레퍼런스는 무궁무진하지만 실제 실무에서 자주 사용되는 기능들은 거기서 거기니깐. 지금 쓰는 이 시리즈에서도 아마 한 묶음으로 필요에 따라 그 때 그 때 순서없이 섞여서 쓸 예정이다.