Chapter 10. Applying CSS

Mar 26, 2008 • {"login"=>"whiteship", "email"=>"whiteship2000@gmail.com", "display_name"=>"기선", "first_name"=>"기선", "last_name"=>"백"}

CSS를 문서에 적용하는 방법

<style> 엘리먼트

<style type="text/css">

    <![CDATA[

    ... CSS declarations here ...

    ]]>

  </style>

embedded style sheet라고도 하며, CSS를 이해하지 못하는 브라우저들을 위해 CDATA 주석 안에 둔다.

페이지를 로딩할 때마다 스타일을 정의한 부분도 매번 다운로드 된다.

여러 페이지에서 동일한 스타일을 사용하고 있을 때, 이것을 변경하려면 여러 페이지를 모두 수정해야 한다.

외부의 스타일 시트 사용하기

<link rel="stylesheet" type="text/css" href="styles.css" />

유지보수하기 편한다.

한 번만 다운로드 한다.

첫 번째 방법처럼 예전 브라우저들은 CSS를 그냥 그대로 화면에 뿌려버릴 수도 있다.

@import 사용하기

<style type="text/css">

    <![CDATA[

      @import "styles.css";

    ]]>

</style>

두 번째 방법과 비슷하게 이것도 역시 외부 문서에서 읽어온다.

네스케이프 4.X 이하의 버전에서는 CSS를 화면에 그대로 뿌리는데, 위 처럼 해두면 그걸 숨길 수 있다.

Inline Style

<h1 style="font-family: Georgia, serif; color: orange;">This is a Title</h1>

가장 나중에 설정한 스타일이기 때문에 다른 스타일들을 오버라이딩한다.

내용과 표현이 분리가 되지 않는다.

<head>에서 외부 파일을 참조할 수 없을 때 임시적으로 사용할 수 있다.

Extra Credit

Alternate Styles

<link rel="stylesheet" type="text/css" href="default.css" title="default"/>

<link rel="alternate stylesheet" type="text/css" href="largetext.css" title="large" />

<link rel="alternate stylesheet" type="text/css" href="largertext.css" title="larger"/>

rel 속성에 alternate stylesheet 값을 사용할 수 있다.

title 속성과 값도 추가해서 나중에 선택할 수 있도록 한다.