CSS @import 규칙

정의와 사용법

@import 규칙은 다른 스타일 시트에 스타일 시트를 가져올 수 있습니다.

@import 규칙은 문서 상단에 위치해야 합니다. (@charset 선언 이후로는 됩니다).

@import 규칙은 미디어 쿼리를 지원하므로 미디어에 따라서 스타일 시트를 가져올 수 있습니다.

예제

예제 1

"navigation.css" 스타일 시트를 현재 스타일 시트에 가져옵니다:

@import "navigation.css"; /* 문자열 사용 */

또는

@import url("navigation.css"); /* url 사용 */

예제 2

프린트 미디어일 때만 "printstyle.css" 스타일 시트를 가져옵니다:

@import "printstyle.css" print;

직접 시도해 보세요

예제 3

스크린 미디어가 있고 뷰포트 최대 너비가 768 픽셀인 경우에만 "mobstyle.css" 스타일 시트를 가져옵니다:

@import "mobstyle.css" screen and (max-width: 768px);

직접 시도해 보세요

CSS 문법

@import url|string list-of-mediaqueries;

속성 값

값 설명
url|string url 또는 문자열, 가져오려는 자원 위치를 나타냅니다. url은 절대적이거나 상대적일 수 있습니다.
list-of-mediaqueries 구분된 미디어 쿼리 목록은 URL을 통해 가져온 CSS 규칙이 어떤 조건에서 적용되는지 결정합니다.

브라우저 지원

표에서의 숫자는 이 특성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5