@import rule 사용법, link 태그와 차이

 

 @import rule 사용법, link 태그와 차이

 

 

어제는 외부 문서나 자원를 연결하는 <link>태그에 대해 알아 보았습니다.

 

외부 문서를 연결하는 link 태그 사용법

 

복습하는 의미에서, link 태그는 주로 다음 기능을 하는데요

 

-외부 스타일 시트 연결(css나 javascript 파일 등)

 

-사용자 컴퓨터에 없는 글꼴을 지원하는 웹 폰트로 연결

 

이러한 기능은 @import 규칙을 통해서도 똑같이 구현이 가능합니다.

 

사용 예

 

<style type="text/css">

@import "sample.css";

p {
  color: blue;
}
</style>

 

@import rule 사용법

 

 

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이 적용되지 않고 깨져 보입니다.

 

 

 

<link>태그와 @import rule의 차이

 

@import 를 통해 파일을 하나 이상 넣는다면, 사이트가 좀 더 방대해졌을 때 관리의 어려움이 있고,

보기에도 깨끗하지 못합니다.

 

예 

 

 

<head>

<style type="text/css">

@import url('header.css') screen;
@import url('content.css') screen;
@import url('sidebar.css') screen;
@import url('print.css') print;

</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;
  @import url('content.css') screen;
  @import url('sidebar.css') screen;
  @import url('print.css') print;

 

 

<link> 태그를 한 번 사용함으로써 위 네 @import가 모두 로드됩니다.

 

link 태그와 @import 규칙은 외부스타일시트를 참조하거나, 웹 글꼴을 사용하는 데 자주 사용된다고 했는데요

 

다음 시간엔 @font-face 규칙을 통해 웹 글꼴을 사용하는 방법을 알아 보겠습니다.

 

@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) 바로가기

 

@import 관련 연습 파일 import.htm


신고
지구별에
css 2014.05.16 14:11
Powerd by Tistory, designed by criuce