@import rule 사용법, link 태그와 차이
어제는 외부 문서나 자원를 연결하는 <link>태그에 대해 알아 보았습니다.
복습하는 의미에서, link 태그는 주로 다음 기능을 하는데요
-외부 스타일 시트 연결(css나 javascript 파일 등)
-사용자 컴퓨터에 없는 글꼴을 지원하는 웹 폰트로 연결
이러한 기능은 @import 규칙을 통해서도 똑같이 구현이 가능합니다.
사용 예
<style type="text/css">
@import "sample.css";
p {
color: blue;
}
</style>
1. 구문
@import url(' ');
또는
@import " ";
* 인용부호는 쌍따옴표, 홑따옴표 모두 가능
* 인용부호 안에 주소를 입력합니다
2. @import 규칙은 css 파일 맨 처음 위치합니다.
*티스토리의 경우 관리 화면 html/css에서 css 화면에서 맨 첫줄에 코드 삽입
-앞에 주석을 넣으면 @import 파일을 인식하지 못함.
-하지만 @charset 가 있다면 @charset rule이 먼저 옴
3. 미디어 장치에 따라 다른 css파일을 넣으려면
@import url("print.css") print; 프린트일 경우 print.css 파일을 사용
@import url("protv.css") projection, tv; 프로젝터, 티비일 경우 protv 파일을 사용
print, projection, tv 등이 미디어 유형(media type)인데요, 별도로 쓰지 않으면
기본값(all)로 적용됩니다.
media type 관련 여기 참조
* IE4~7에서는 media type이 적용되지 않고 깨져 보입니다.
@import 를 통해 파일을 하나 이상 넣는다면, 사이트가 좀 더 방대해졌을 때 관리의 어려움이 있고,
보기에도 깨끗하지 못합니다.
예
|
<head> <style type="text/css"> @import url('header.css') screen; </style> </head>
|
그래서 <link>태그와 @import를 섞어 쓰면 관리가 쉽고 보기에도 좋습니다.
(1) html 작성
|
<head> <link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css"> </style> </head>
|
(2)아래 코드를 styles.css 이름으로 저장
|
@import url('header.css') screen; |
<link> 태그를 한 번 사용함으로써 위 네 @import가 모두 로드됩니다.
link 태그와 @import 규칙은 외부스타일시트를 참조하거나, 웹 글꼴을 사용하는 데 자주 사용된다고 했는데요
다음 시간엔 @font-face 규칙을 통해 웹 글꼴을 사용하는 방법을 알아 보겠습니다.
@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) 바로가기
@import 관련 연습 파일
import.htm
'css' 카테고리의 다른 글
| [html/css] 글자색 color 속성, 배경색 background-color 속성 배우기 (1) | 2014.05.20 |
|---|---|
| @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) (0) | 2014.05.19 |
| [html/css]외부 문서를 연결하는 link 태그 사용법 (1) | 2014.05.14 |
| [html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) (4) | 2014.05.10 |
| [html/css]글꼴 크기를 지정하는 font-size 속성(px, pt, %, em 차이) (2) | 2014.05.09 |
댓글