CSS 링크 & 가져오기, 미디어 타입 설정 (CSS Link & Import, Media Type)

Link 방식과 Import 방식은 CSS를 불러온다는 점에서 같지만 Link 방식은 HTML 문서에서만 사용할 수 있고 Import 방식은 HTML 문서와 CSS 문서에서 모두 사용이 가능하다는 점이 다릅니다.

HTML 문서에서 CSS Link 하기

CSS Styles 패널-Attach Style Sheet

Css Styles 패널의 우측 하단에 위치한 Attach Style Sheet Attach Style Sheet 버튼을 누릅니다.

Attach External Style Sheet

default.css 라는 파일을 External CSS Link 방식으로 불러옵니다. Add as 항목에서 Link 를 선택합니다. Media 항목을 선택하지 않는 경우 기본값은 all 이 되는데 현재는 all 이라는 Media Type 을 일부러 지정하였습니다. Media Type의 종류에는 다음과 같은 것들이 있습니다.

위와 같이 대화상자를 이용하여 외부 CSS를 링크하게 되면 드림위버는 아래와 같은 코드를 생성하게 됩니다.

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

만약 Media Type 으로서 print 를 지정하였다면 해당 CSS 규칙은 인쇄할 때에만 적용 됩니다. 지금 여러분이 보고 계신 이 문서는 HTML 문서이지만 모니터 화면(screen)에 출력되는 스타일과 인쇄 장치(print)를 이용하여 출력할 때의 스타일이 다르게 표현 됩니다. 현재의 문서를 HTML 버전으로 보고 계시다면 인쇄 미리보기 버튼을 눌러서 출력 결과를 확인해 보시기 바랍니다. 웹 브라우징 장치에서 출력되는 스타일과 인쇄장치를 이용하여 출력되는 스타일이 다르게 보일 것입니다. 현재의 문서에는 다음과 같은 두 개의 CSS 파일이 Link 방식으로 연결되어 있으며 하나의 파일은 모든 장치를 위한 CSS이고 다른 하나는 인쇄장치를 위한 CSS 입니다.

<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

인쇄를 위하여 별도의 HTML 파일을 제작하는 것은 낭비 입니다.

HTML 문서에서 CSS Import 하기

Attach External Style Sheet

HTML 문서에서 외부 CSS를 Import 하는 방법은 Link 하는 방법과 동일합니다. Add as 항목에서 Import 를 선택하면 됩니다.

<style type="text/css" media="all">
<!--
@import url("default.css");
-->
</style>

CSS 문서에서 CSS Import 하기

CSS 문서에서 또 다른 외부 CSS를 Import 하는 방법 또한 Link 하는 방법과 동일합니다. Add as 항목에서 Import 를 선택하면 됩니다. CSS 문서에서 또 다른 외부 CSS를 Import 하고자 할 때 Add as: Link 항목은 비활성화 됩니다.

@charset "utf-8";
@import url("print.css") print;

* { ... }
body { ... }

단, CSS 문서에서 또 다른 CSS를 Import 하는데에는 한 가지 규칙이 있습니다. 다른 어떤 CSS 정의 규칙보다 먼저 나와야 한다는 점 입니다. 따라서 드림위버는 Import 규칙을 적용하면서 CSS 문서의 가장 첫 줄에 Import 규칙을 선언하게 됩니다. 만약 코드 첫 줄에 문자셋(@charset "utf-8";) 규칙이 포함되어 있다면 Import 규칙은 두 번째 줄에 선언 됩니다.

Internet Explorer는 현재 활성화된 버전(7)에 이르기까지 Import 규칙에 적용된 Media Type을 인식하지 못하는 버그가 있습니다. 따라서 Media Type을 지정하려면 Link 규칙을 사용하는 것이 좋고 Import 규칙을 사용할 때에는 Media Type을 지정하지 않아야 한다는 것을 염두해 두어야 합니다. Link 규칙에 적용된 Media Type은 대부분의 브라우저에서 문제가 없습니다.