lang/css

.css file include

C/H 2006. 9. 22. 13:24

.css 파일은 html의 'link'를 이용해서 html 문서와 연결할 수 있다.

<link>는 html 문서의 <head>안에 두어야 한다.

'type' 은 mime 형식(css의 경우 text/css)을 지정하는데, css를 지원하지 않는 브라우저에서는 이것을 무시할 수 있도록 해준다. 'media'는 css가 적용될 매체를 지정할수있다.


print
인쇄
screen
화면 출력
projection
프로젝터 출력
braille
점자출력
aural
음성 출력
all
모든 매체에 대한 출력

여러 매체를 지정할 때에는 쉼표를 사용하거나 'all'을 사용한다.

<link rel=stylesheet href=sam.css type=text/css media=screen>

rel은 html문서와 연결된 파일 사이의 관계를 정의한다. 위의 보기는 현재문서가 'sam.css'파일에 의해 모든 style sheet가 설정되어 있음을 보여준다.


<link rel=stylesheet href=sam1.css type=text/css title=sam1.css media=screen,print>

위의 보기에서는 'sam1.css' 파일이 현재문서에 자동 적용된다. rel=stylesheet과 title을 함께 사용한다.

<link rel=alternate stylesheet href=sam3.css type=text/css title=sam3 media=screen,print>

위는 보조 스타일의 보기인데, rel=alternate stylesheet를 이용해서 지정한다. 이것은 자동 적용된 스타일을 바꾸기 위해 사용한다.


<link rel=stylesheet href=basics.css title=toge>

<link rel=stylesheet href=tables.css title=toge>

<link rel=stylesheet href=forms.css title=toge>

위의 보기는 세개의 css파일이 동시에 한 문서에 적용되는 예인데, 이를 위해서는 동일한 title을 사용해야만 한다.

.css 파일 불러들이기linking to an external style sheet는 여러 페이지에 동일한 css가 적용될 때 편리하다. 대부분의 브로우저는 css파일을 캐쉬Cash로 보관하므로 문서의 생성시간을 절약할 수 있다.

반응형

'lang > css' 카테고리의 다른 글

css menu  (0) 2006.09.22
창크기에따른 글자크기 자동조절  (0) 2006.09.22
측정단위  (0) 2006.09.22
컨텍스츄얼 셀렉터(Contextual Selector)  (0) 2006.09.22
슈도클래스(Pseudoclasses)  (0) 2006.09.22