CSS 란?

CSS 란?

티스토리로 블로그를 운영하다보면 블로그 소유권, 구글 애드센스 광고 코드 등을 적용하기 위해서 HTML 파일을 수정하는 경우가 발생합니다. 그리고 무료로 제공된 스킨을 수정하는 경우도 발생합니다. 이와 같이 HTML 파일을 수정하다보면 CSS 파일도 수정을 하는 경우가 발생합니다. 그럼 CSS는 무엇 일까요?

CSS는 Cascading Style Sheets의 약자로 HTML에 작성된 내용을 어떻게 표시하는가를 정의하는 스타일 시트 언어입니다. CSS의 정의는 간단한데 아직도 정확히 CSS가 어떤 것인지 이해가 되지 않는 분들도 있을 것입니다.

지금 작성하는 블로그도 그렇지만 웹 페이지에 정보 등을 전달하기 위해 글을 쓸 경우 HTML에는 정보 전달을 위한 글자 등을 작성합니다. CSS는 이런한 글자들에 스타일을 정의한다고 생각하면 됩니다. 즉 글자 색상, 글자 크기, 글자 폰트 등의 스타일을 정의하는 파일이라고 생각하시면 됩니다.

HTML 4 이전에는 CSS에 작성한 스타일을 HTML에 같이 작성을 했습니다. 그러나 HTML 4 부터는 이런한 스타일 서식 설정을 HTML에서 분리하여 CSS 파일로 관리하는 것이 가능해졌습니다. 물론 HTML의 하나의 파일에 CSS 파일의 스타일 정의를 같이 작성해도 상관은 없습니다.

CSS를 사용하는 이유

흔히 생각하기에는 HTML의 내용과 CSS 스타일을 나누어서 관리하는 것보다 2개를 합쳐서 하나로 관리하는 것이 좋을 것 같다고 생각할 수도 있습니다. 하지만 오랜 시간 웹 페이지를 개발하고 운영하다보니 정보를 전달하는 내용과 그 내용을 꾸며주는 스타일을 나누 것이 관리 및 운영에서 여러모로 편리하다는 것을 알게 되었고 그래서 HTML4부터는 분리해서 따로 관리하는 기능이 추가 된 것입니다.

예를 들어 아래와 같이 내용(HTML) 과 스타일 (CSS)을 하나의 파일로 작성한 웹 페이지가 있다고 가정을 해봅시다.

그런데 내용은 변경없이 스타일만 변경하여 일주일 주기로 계속 변경해야 된다면 하나의 파일로 작성했을 경우 매번 수정을 해주어야 합니다. 그러다 보면 실수로 내용의 부분을 수정하여 버그가 발생할 수도 있습니다.

웹 페이지에서는 내용은 변경없이 스타일만 변경하는 경우는 종종 있습니다. 이럴 경우 내용(HTML)과 스타일(CSS)를 분리해서 관리하면 내용이 변경되는 버그는 발생하지 않으며 관리하는 입장에서도 편리합니다. 또한 여러 개의 스타일 파일을 만들어서 적용하다면 여러 종류의 결과 화면을 만들 수 있어서 웹 페이지 멋있게 표현할 수도 있고 관리도 용이합니다.