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 규칙이 어떤 조건에서 적용되는지 결정합니다. |
브라우저 지원
표에 표시된 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
