1. 개요

본 문서에서는 Cascading Style Sheet의 약자인 CSS에 대해 알아본다.


2. CSS란?

웹 페이지의 디자인을 정의한 "스타일 시트"로 마크업 언어가 실제로 표시되는 방법을 기술하는 언어이다.

확실히 할 것은 CSS와 HTML은 다르다는 것이다. CSS는 HTML을 보다 보기 좋게 하기 위한 별도의 "언어"라고 할 수 있겠다.

CSS를 사용하면 중복을 방지하고, 유지보수가 편리하며, 하나의 내용을 달리 보여지기 위해 스타일을 적용할 수 있게 된다.

애초에 디자인적인 부분을 HTML과 분리하기 위해 만들어진 것이라고 보면 된다.


3. CSS의 역사

위키 백과에 따르면 1996년 12월 17일에 처음 발표되었다고 한다.

3-1. CSS 1

  • 1996년 12월 17일
  • Netscape 4, IE 3/4 버전 등이 지원
  • 기본적인 CSS 기능 (서식, 폰트, 마진 등) 포함

3-2. CSS 2

  • 1998년 5월

3-3. CSS 2.1

  • 2006년

3-4. CSS 3

  • 최초의 드래프트 버전은 1999년 6월
  • 하나의 CSS 3는 없고 모듈화되어 있음

3-5. CSS 4


4. 활용

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="/style1.css">
  </head>
  <body>
    <p>
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

위의 link rel= 라인이 바로 CSS 파일을 정의한 것이다.


5. 성능

CSS를 변경하면 화면을 갱신하기 때문에 성능에 영향이 있다. CSS 속성을 변경하면 성능 급격한 성능 저하가 발생하게 되므로 CSS 클래스를 활용하는 것이 좋다.