CSS 적용을 위한 또 다른 방법, @import

앞서 HTML 소스가 있는 문서에 CSS를 적용하는 3가지 방법에 대해 살펴 보았다.

 

2020/02/18 - [CSS] - CSS 적용을 위한 3가지 방법

 

인라인, 내부스타일, 외부스타일 적용 방법 외에 추가로

css를 적용하는 방법이 바로 @import 방식이다.

 

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

 

예를 들면 default.css 라는 파일을 외부 스타일 방식을 적용해서

문서에 적용시킨 후에 해당 css파일 안에 또 다른 css를 불러 오는 방법이다.

 

 

1. @import 적용 방법

 

1. 문서에 default.css 파일 적용

<link rel="stylesheet" href="/css/default.css">

 

2. default.css 파일 내에 header.css 를 @import (문자형식으로 적용하거나 url 형식으로 적용)

@charset "utf-8";

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

 

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

@import 방식과 link 방식 중 어떤 방법이 더 효율적일까를 고민해보았다.

 

결론부터 말하자면 link 방식 (외부 스타일) 방식이 더 효율 적이다.

 

@import 방식의 경우 @import 된 css들을 직렬 로딩 방식으로 불러오고

 

외부 스타일 방식의 경우 병렬 로딩 방식으로 css를 불러온다

 

쉽게 예를 들자면

charset "utf-8";

@import "test1.css";  /* 1번째 */
@import "test2.css";  /* 2번째 */
@import "test3.css";  /* 3번째 */

위와 같은 @import 방식의 경우 test1.css를 불러온 뒤에 test2.css, test3.css를 차례로 불러온다.

 

즉, css를 하나하나 순차적으로 불러오기 때문에(직렬 로딩)

css의 양이 얼마 되지 않는다면 크게 상관이 없겠지만

css의 양이 방대해진다면 페이지 로딩속도가 현저히 느려질 것이다.

 

 

<link rel="stylesheet" href="test1.css">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="test3.css">

반면 link 방식 (외부 스타일 방식)의 경우 

test1.css와 test2.css, test3.css가 동시에 로딩하여 불러오기 때문에(병렬 로딩)

 

페이지 로딩 속도가 @import 방식에 비해 빠르고 효율적이다.

 

3. @import 방식의 Edge 브라우저 적용 문제

@import 방식은 익스플로어나 크롬, 파이어폭스 등 다른 브라우저에서는

별 문제 없이 잘 적용을 할 수 있지만

 

엣지(Edge) 브라우저에서는 @import 한 css 내용을 문서에 적용시키지 못하는 버그가 있다.

 

 

로딩 문제나 Edge 브라우저 버그 문제 등을 생각해본다면

특별한 경우가 아니라면 @import 방식이 아닌 외부 스타일 방식으로 css를 적용하는 편이 좋을 것 같다.

 

 

 

---

참조

https://www.w3schools.com/cssref/pr_import_rule.asp

CSS @import Rule