CSS @import 규칙 완벽 가이드: 스타일시트를 효율적으로 가져오는 방법

CSS의 @import 규칙을 사용해 다른 스타일시트를 불러오는 방법을 알아보세요.

CSS @import at-rule은 하나의 CSS 스타일시트 안에 다른 CSS 스타일시트를 불러올 수 있게 해주는 기능입니다. 코드베이스가 크거나 계속 성장하는 웹사이트에서 특히 실용적입니다.

기본 사용법

@import url(variables.css);

이 방식을 활용하면 모든 스타일을 하나의 거대한 스타일시트에 몰아넣는 대신, 변수·타이포그래피·색상·간격 등 주제별로 CSS를 개별 파일로 나누어 관리할 수 있습니다.

그런 다음 각각의 CSS 파일을 메인 스타일시트에 불러와 하나로 합칠 수 있습니다:

/* main.css 파일 */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

코드베이스가 시간이 지나며 커져도 전체 구조를 깔끔하고 체계적으로 유지할 수 있는 실용적인 방법입니다.

@import 사용 시 주의사항

@import를 사용할 때 가장 중요한 점은 @import 문을 반드시 메인 CSS 파일(다른 CSS 파일들을 불러오는 파일)의 맨 위에 배치해야 한다는 것입니다.

예시:

/* 
main.css 파일
import 문 위에는 CSS를 추가하지 마세요! 
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
아래쪽에는 CSS를 자유롭게 추가할 수 있습니다 
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

메인 CSS 파일에서 @import 문 위에 어떤 CSS 스타일이라도 작성하면 해당 스타일은 무시됩니다. 반드시 import 문이 파일 최상단에 오도록 작성하세요.

미디어 쿼리와 함께 @import 사용하기

@import 문을 활용하면 조건부로 스타일시트를 불러올 수도 있습니다. 예를 들어 스마트폰처럼 작은 화면에서만 로드되어야 하는 특정 스타일시트가 있다면, @import 문에 미디어 쿼리를 붙여 제어할 수 있습니다:

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

위 예시에서 mobile.css 스타일시트는 최대 너비가 768픽셀인 화면에서만 적용됩니다. 이렇게 하면 데스크톱과 모바일 환경에 서로 다른 스타일을 효율적으로 분리해 관리할 수 있습니다.