CSS 에서 @Import

CSS 적용을 위한 3가지 방법으로는 인라인, 내부스타일, 외부스타일 적용 방법 외에 추가로 CSS를 적용하는 방법이 바로 @import 방식입니다.

@import 방식은 다른 스타일 시트에서 또 다른 스타일을 가져올 때 사용합니다.

예를 들어 default.css 라는 파일을 외부 스타일 방식을 적용해서 문서에 적용시킨 후에 해당 CSS 파일 안에 또 다른 CSS를 불러오는 방법입니다.

적용 방법

  1. 문서에 default.css 파일 적용
<link rel="stylesheet" href="/css/default.css">
  1. default.css 파일 내에 header.css를 @import (문자형식으로 적용하거나 url 형식으로 적용)
/* default.css */
@charset "utf-8";

@import "header.css"; /* 문자 형식 */
@import url("header.css"); /* url 형식 */

@import 방식 vs link 방식(외부 스타일)

*@import 방식과 <link> 방식 중 어떤 방법이 더 효율적일까를 생각해볼 때, 결론부터 말하자면 <link> 방식(외부 스타일)이 더 효율적이다.*