CSS @import 규칙 완벽 가이드 – 미디어 타입별 스타일시트 불러오기

CSS의 @import 규칙은 외부 스타일시트를 현재 문서로 불러올 때 사용하는 at-규칙입니다. 특히 URL 뒤에 미디어 타입을 함께 지정하면, 화면(screen), 인쇄(print) 등 특정 대상 미디어에 맞춰 스타일 정보를 다르게 적용할 수 있습니다.

@import 기본 문법

@import 규칙의 기본 문법은 다음과 같습니다.

@import url("/* 파일 경로 */") 미디어타입 {
    CSS 코드;
}

미디어 타입은 생략할 수 있으며, 생략 시 모든 미디어에 스타일이 적용됩니다. 이제 실제 예제를 통해 @import 규칙의 사용법을 살펴보겠습니다.

예제 1: 화면과 인쇄용 스타일 분리하기

HTML 문서

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

스크린용 CSS 문서 (screen.css)

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew; }

인쇄용 CSS 문서 (print.css)

p { color: red; font-style: italic; }
.two { color: #989898; font-size: 40px; }

실행 결과

위 문서를 화면(screen) 미디어에서 볼 때의 결과입니다.

CSS @import 규칙 완벽 가이드 – 미디어 타입별 스타일시트 불러오기

같은 문서를 인쇄(print) 미디어로 출력할 때의 결과입니다.

CSS @import 규칙 완벽 가이드 – 미디어 타입별 스타일시트 불러오기

이처럼 @import 규칙에 미디어 타입을 지정하면 하나의 HTML 문서에서도 환경에 따라 전혀 다른 스타일을 적용할 수 있습니다.

예제 2: all 미디어 타입으로 전체 적용하기

이번에는 all 키워드를 사용해 모든 미디어에 동일한 스타일을 적용하는 예제입니다.

HTML 문서

<!DOCTYPE html>
<html>
<head>
<title>CSS @import rule</title>
<style type="text/css">
@import url(all.css) all;
</style>
</head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>

CSS 문서 (all.css)

p {
    float: left;
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: #48C9B0;
    border: 4px solid #145A32;
}
p.noneFloat {
    float: none;
    clear: both;
    color: #34495E;
}

실행 결과

CSS @import 규칙 완벽 가이드 – 미디어 타입별 스타일시트 불러오기

정리

@import 규칙은 외부 CSS 파일을 모듈처럼 관리할 수 있게 해주는 유용한 도구입니다. 미디어 타입(screen, print, all 등)을 조합하면 디바이스나 출력 방식에 따라 유연하게 스타일을 제어할 수 있습니다. 다만 성능 측면에서는 <link> 태그를 사용한 병렬 로딩이 더 권장되므로, 상황에 맞게 활용하는 것이 좋습니다.