Chapter 10. Applying CSS

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 속성과 값도 추가해서 나중에 선택할 수 있도록 한다.