728x90
| CSS와 HTML의 연결 |
| .css 파일 불러들이기 Linking to an External Style Sheet |
.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로 보관하므로 문서의 생성시간을 절약할 수 있다. |
| @import로 불러오기 Importing a Style Sheet |
@import는 css파일이나 <style>에서 사용하는데, @import 는 css내용의 첫부분에 있어야만 한다. 보기 <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- ..@import url(http://www.user.com/fir.css); ..@import url(sec.css); P { background: white } --> </STYLE> 위의 보기에서 같은 내용의 설정은 뒤에 것이 우선한다. 만일 P에 대해 fir.css에서는 바탕Background을 붉은 색으로, sec.css에서는 검은 색으로 지정했다면, 화면의 바탕은 흰색으로 나타난다. 즉, 세번째의 설정이 우선하는 것이다. 따라서, @import는 전반적으로 지정된 css내용을 불러들여 일부를 문서안에서 수정해가며 사용할 때 편리하다. |
728x90
'BOOK > DHTML' 카테고리의 다른 글
| 태그별 - position (0) | 2021.08.01 |
|---|---|
| 리스트 스타일 지정 (0) | 2021.08.01 |
| 테두리와 스타일 (0) | 2021.08.01 |
| 바탕이미지 스타일 (0) | 2021.08.01 |
| 문단모양과 스타일 (0) | 2021.08.01 |
댓글