@import 규칙

@import는
스타일시트에 다른 스타일시트를 가져오기(import, 가져오다) 위한 규칙입니다.
이 규칙을 사용하면 스타일시트 내부에서 다른 스타일시트를 불러와 적용할 수 있습니다.

☝ '@import 규칙'이라는 용어를 사용했습니다.
CSS에서 @기호로 시작하는 여러 식별자(identifier)가 뒤따르는 구문이 있는데, 이러한 규칙이 있는 구문을 "@식별자 규칙(흔히 @-rule)"이라는 용어로 말합니다.
예를 들어, @import의 경우 @ 다음의 import이 식별자이며 '@import 규칙'이라고 합니다. 그래서, @import를 '스타일시트에 다른 스타일시트를 가져오기 위한 규칙'이라고 설명하는 것입니다.

스타일시트에서 다른 스타일시트를 불러오는 단순한 작업상의 편의성을 제공합니다.

스타일시트:
페이지나 문서의 레이아웃과 디자인을 제어하는 데 사용되는 CSS 규칙 집합입니다.
CSS 파일이나, <style> 태그 내의 콘텐츠를 모두 '스타일시트'라고 말합니다.

@import 규칙은 HTML에 CSS 적용과 연결하는 여러 방법 중 하나입니다.

@import 규칙은 다음과 같습니다.

구문

스타일시트

옵션으로 url("외부 CSS 파일의 URL") 뒤에 띄어쓰기로 구분된 미디어 쿼리(list-of-media-queries)를 지정할 수 있습니다.

@import 규칙를 사용할 때에는 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다는 것입니다. 주의할 점을 참고하세요.

CSS 파일 내에서 사용

CSS 
@import url("sheet1.css");
@import url("sheet2.css");
@import url("sheet3.css");
CSS 
@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */
h1 {color: red;}
p {color: blue; background-color: yelow;}
table td,
table th {border: 1px solid #000000;}

HTML <style> 태그 내에서 사용

HTML 
<style>
    @import url("sheet1.css");
    @import url("sheet2.css");
    @import url("sheet3.css");
</style>
HTML 
<style>
	@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */
	h1 {color: red;}
	p {color: blue; background-color: yelow;}
	table td,
	table th {border: 1px solid #000000;} 
</style>

미디어 쿼리 지정하기

옵션으로 url("외부 CSS 파일의 URL") 뒤에 띄어쓰기로 구분된 미디어 쿼리(list-of-media-queries)를 지정할 수 있습니다.

CSS 
/* 미디어 쿼리 지정하기 구문:
   @import url("외부 CSS 파일의 URL") list-of-media-queries;
*/
@import url("print.css") print;
@import url("landscape.css") screen and (orientation: landscape);

한 가지 주의할 점은 @import 규칙을 사용할 때에는 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다는 것입니다.

다음과 같은 사용은 잘못된 것입니다.

HTML 
<style>
	h1 {color: red;}
	p {color: blue; background-color: yelow;}
	table td,
	table th {border: 1px solid #000000;}
	@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */
</style>
CSS 
h1 {color: red;}
p {color: blue; background-color: yelow;}
table td,
table th {border: 1px solid #000000;}
@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */

주석은 @import 규칙보다 앞에 올 수 있습니다.

CSS 
/* 이 스타일시트는 웹 페이지의 기본 스타일을 정의합니다. */
@import url("styles.css");

/* 추가 스타일 정의 */
body {
    background-color: #f0f0f0;
}

@charset 규칙을 사용할 경우에는 @import 규칙보다 앞에 와야 합니다.

CSS 
@charset "utf-8";

/* 이 스타일시트는 웹 페이지의 기본 스타일을 정의합니다. */
@import url("styles.css");

/* 추가 스타일 정의 */
body {
    background-color: #f0f0f0;
}

@import 규칙 사용 시 고려할 점

@import 규칙은 스타일시트에서 다른 스타일시트를 불러오는 간단한 작업을 위한 편의성을 제공하지만, 그 외의 장점은 제한적일 수 있습니다. 주로 코드의 가독성을 높이고, 관리의 용이성을 위해 사용되지만, 다음과 같은 몇 가지 단점도 함께 고려해야 합니다.

중첩된 스타일시트는 구조적 파악이 힘듦

여러 스타일시트를 서로 포함하게 되면, 각 스타일시트의 의존성을 추적하고 어떤 스타일이 어디에서 정의되었는지를 파악하기가 복잡해집니다. 이는 특히 큰 프로젝트에서 더 심각한 문제가 될 수 있습니다.

이는 스타일시트가 분리되어 있는 경우, 각 스타일시트의 역할과 관계를 시각적으로 이해하는 것이 어려워집니다. 어떤 스타일이 우선적으로 적용되는지를 파악하기 위해서는 각 파일을 열어봐야 하며, 이는 시간 소모를 유발할 수 있습니다.

결국, 스타일시트를 관리할 때 관련된 스타일의 존재를 쉽게 파악하지 못하는 점이 가장 큰 단점으로 지적될 수 있습니다.

HTML에 CSS 적용과 연결하는 방법에서 가장 효율적으로 스타일시트를 관리의 용이성을 높이는 방법을 고려해 보세요.

브라우저 호환성

@import 규칙의 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
@import 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

@import 규칙의 명세서 사양
명세서 사양
@import CSS Cascading and Inheritance Level 5
#at-import

참고문헌

같이 보기