CSS에서는 하나의 스타일 시트 안에 다른 CSS 파일을 불러올 수 있습니다. 이때 사용하는 것이 바로 @import 규칙입니다. @import는 문서 내에서 외부 스타일 시트를 연결하는 역할을 하며, 주로 한 스타일 시트가 다른 스타일 시트에 의존하는 경우에 활용됩니다.
@import 규칙은 반드시 문서의 최상단, 즉 <head> 내부의 @charset 선언 뒤에 위치해야 합니다.
@import 규칙의 기본 문법
@import 규칙의 기본적인 작성 형식은 다음과 같습니다.
@import /*url 또는 미디어 쿼리 목록*/
여기서 미디어 쿼리는 복합 조건문으로 구성할 수 있으며, 이를 통해 다양한 미디어 환경(화면 크기, 인쇄 등)에서 문서가 어떻게 동작할지 지정할 수 있습니다.
예제 1: @import로 스타일 시트 불러오기
다음 예제는 @import 규칙을 실제로 적용한 사례입니다.
HTML 문서
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
background-color: honeydew;
}
</style>
</head>
<body>
<p>첫 번째 데모 단락입니다.</p>
<p class="two">두 번째 데모 단락입니다.</p>
<p>세 번째 데모 단락입니다.</p>
</body>
</html>CSS 문서 (style.css)
p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; }실행 결과
위 코드를 실행하면 모든 단락에 style.css의 스타일이 적용되어, 기본 단락은 남색 기울임체로 표시되고 .two 클래스가 지정된 단락은 진한 초록색 24px 크기로 렌더링됩니다.
예제 2: link 태그와 함께 사용하기
다음은 <link> 태그로 외부 CSS 파일을 연결하고, 그 안에서 추가 스타일을 정의하는 예제입니다.
HTML 문서
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div></div> </body> </html>
CSS 문서 (style.css)
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
}실행 결과
위 코드를 실행하면 보라색 테두리와 연한 파란색 그림자 효과가 적용된 사각형 박스가 화면에 나타납니다.
정리
@import 규칙을 사용하면 여러 CSS 파일을 체계적으로 관리할 수 있어 대규모 프로젝트에서 유용합니다. 다만, @import는 페이지 로딩 속도에 영향을 줄 수 있으므로 성능이 중요한 경우에는 <link> 태그 방식을 우선적으로 고려하는 것이 좋습니다.