CSS @import 규칙 완벽 가이드: 외부 스타일시트 가져오기

CSS의 @import 규칙은 다른 스타일시트 파일을 현재 스타일시트 안으로 가져오는 기능을 합니다. 이 규칙은 반드시 스타일시트의 가장 앞부분, 즉 다른 모든 CSS 규칙보다 먼저 선언되어야 하며, 값으로는 가져올 파일의 URL을 지정합니다.

작성 예제

@import 규칙은 아래와 같이 두 가지 방식으로 작성할 수 있습니다:

<style>
    <!--
        @import "mystyle.css";
        또는
        @import url("mystyle.css");

        .......기타 CSS 규칙.......
    -->
</style>

첫 번째 방식은 URL을 문자열로 직접 지정하는 방법이고, 두 번째 방식은 url() 함수를 사용하는 방법입니다. 두 방식 모두 동일하게 동작하므로 편한 방식을 선택하면 됩니다.

@import 규칙의 장점

@import 규칙의 가장 큰 의미는 스타일시트를 모듈화하여 관리할 수 있다는 점입니다. 용도별로 여러 개의 스타일시트 파일(예: 레이아웃, 색상, 타이포그래피 등)을 나누어 만들어 두고, 필요한 문서에서 해당 파일만 불러와 사용할 수 있습니다. 이를 통해 코드의 재사용성이 높아지고 유지보수가 훨씬 쉬워집니다.

참고 사항

@import는 브라우저가 스타일시트를 순차적으로 다운로드하게 만들어 페이지 로딩 속도에 영향을 줄 수 있습니다. 따라서 성능이 중요한 프로젝트에서는 HTML의 <link> 태그로 여러 스타일시트를 병렬로 연결하는 방식이 더 효율적일 수 있으니 상황에 맞게 선택하는 것이 좋습니다.