@import Rule


Home > Document > CSS > Pseudo > @import Rule

@import Rule

@import Rule은 확장자가 .css인 외부 stylesheet file을 HTML file에 연결시켜서 사용할 수 있게 해 줍니다. 이 방법은 마치 link element 의 href attribute를 사용하여 외부 stylesheet 을 연결하는 것과 효과가 같습니다. 하지만 사용법 상의 차이가 있는데 살펴보면, link element의 경우 아래와 같이

입력
<link rel="stylesheet" type="text/css" href="외부stylesheet의url" />

과 같이 사용하지만 @import Rule의 경우에는 아래와 같이

입력
<style type="text/css">
@import url(외부stylesheet의url);
</style>

과 같이 style block 속에서 사용하거나, 외부 stylesheet file 속에서 사용합니다.

@import Rule 사용법

@import Rule의 용법은 두 가지가 있는데

입력
@import url(외부stylesheet의url);

또는

@import "외부stylesheet의url";

의 두 가지 형식 모두 사용이 가능합니다.

@import Rule 사용시 시켜야 될 사항

@import Rule을 사용할 때 지켜야 될 사항이 있습니다. '지켜야 된다' 라는 뜻은 다음의 두 가지 사항을 지키지 않을 경우 사용한 @import Rule이 적용되지 않는다는 뜻 입니다. 지켜야 될 사항 두 가지는

  1. Style block 이나 외부 stylesheet file의 가장 첫 번째 줄에 @import Rule을 선언해야 합니다.
  2. 선언된 line 끝에 ';' (semi-colon)을 반드시 찍어 둬야 됩니다.

예를 들어 style block 속에서 사용 할 경우 아래와 같이

Style block 속에서 사용 할 경우
<style type="text/css">
@import url(외부stylesheet의url); /* 가장 처음에 선언되어야 한다. */

/* 이후에는  selector 나 다른 CSS를 원래 쓰던대로 쓴다. */
h2{font:bold 12px verdana, 'sans-serif';}
...
...
... 
</style>

또한 .css file을 외부에서 불러들여 사용할 경우도 마찬가지로, @import Rule 선언이 첫 번째 줄에 있어야 됩니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색