본문 바로가기
제가 쓴 책/HTML5, CSS3 and JavaScript

CSS(Cascading Style Sheets)

by edupicker(체르니) 2013. 7. 31.

CSS(Cascading Style Sheets)


CSS(Cascading Style Sheets)는 하나의 프로그램 언어라고 볼 수 있습니다. 여러분이 이 책에서 배우는 HTML5이나 HTML, XHTML 과 같은 마크업 언어 내로 쓰여진 문서 내 요소들의 모양에 변화를 줄 수 있는 언어입니다. 다시 말해서 CSS를 이용하여 문서 내의 텍스트의 색상, 글자의 크기나 어떤 글자체를 사용할 것인지 그리고 문단 간의 공백은 어느 정도로 하며 배경 이미지나 배경색은 어떤 것으로 할 것인지 등과 같은 다양한 시각적인 효과를 문서에 주고자 할 때 CSS를 사용하게 됩니다.

이러한 CSS 처음 CSS 1994년 유럽 입자물리학 연구소(CERN)에 근무하던 Hakon Wium Lie에 의해서 CHSS(Cascading HTML Style Sheets)라는 이름으로 제안되어 1996년 겨울 CSS level 1이 채택된 이래로 1998 CSS 2가 채택되었고 뒤이어 CSS 2.1 버전이 보편적으로 사용되고  있습니다.  현재 CSS 2.1 관련된 명세(specification)“http://www.w3.org/Style/CSS/”에서 볼 수 있습니다. 그리고 현재 CSS 3 버전이 개발 중에 있으며 이와 관련된 Draft 문서는
“http://dev.w3.org/csswg/”
에 있습니다.


여러분들은 HTML을 이용하여 웹 페이지의 외부 여백(margin), 내부 여백(padding) 등과 같은 배치를 디자인할 때 필요한 요소(Element) 안에 style 속성을 이용한 단순한 스타일링 같은 작업만 할 수 있지만 이런 방법은 한계가 있습니다.
예를 들면 간단하게 보면 다수의 동일한 요소에 스타일을 적용하거나 다수의 웹 페이지에 동일한 스타일을 적용하려고 할 때  각 요소들 혹은 각 페이지에 속한 각 요소들에 style 속성을 이용하여 원하는 스타일을 적용해야 하는 번거로움과 복잡함이 발생합니다.
하지만 여러분이 CSS를 이용하면 이러한 한계점을 극복할 수 있습니다. CSS를 사용함으로 해서 얻을 수 있는 이점을 몇 가지로 요약하면 다음과 같습니다.

첫 번째, 스타일시트(Style Sheet) 하나로 다수의 웹 페이지에 적용할 수 있습니다.
HTML
요소들의 style 속성에 글꼴 색상, 크기나 한 페이지의 배경색을 설정하는 등의 작업을 할 때 이러한 요소들에 설정된 스타일은 다른 페이지에서 다시 적용하려면 동일한 작업을 반복해주어야 합니다. 반면에 스타일 시트를 이용하면 하나의 스타일 시트 파일(.css) 파일을 정의해놓고 이를 외부 파일 참조 형태로 웹 페이지에 참조시킴으로 웹 사이트의 다수의 웹페이지에 적용할 수 있습니다. 따라서 그만큼 코드 작성량을 줄일 수 있고 추후 변경이 필요할 때 해당 CSS 부분만 변경해주면 되기에 유지보수에도 그만큼 편리합니다.

두 번째, 웹 페이지에 나타나는 모든 디자인 부분을 제어할 수 있습니다.
글꼴, 텍스트, 색상, 페이지 여백, 이미지나 요소들의 위치 등과 같은 페이지에 나타나는 부분들을 세밀하게 제어할 수 있습니다.

세 번째, 동적 페이지를 구성하는데 용이합니다.
Javascript(jQuery)
와 같은 스크립트 언어를 이용하여 사용자의 요청에 대한 반응으로 텍스트나 다른 컨텐츠들을 이동시키거나 숨기거나 나타나게 하는 등의 동적인 작업을 구성할 수 있습니다.