[HTML][CSS] Link VS @import
개요
HTML 문서 내에서 CSS 파일을 로딩해오는 방법에는 <link> 태그와 @import 키워드를 이용하는 방법이 있다. 이 문서에서는 @import를 중점적으로 살펴보고, <link> 태그와의 차이점에 대해서 살펴보겠다.
@import
<link>가 HTML의 태그로서 다른 파일들을 불러오는 태그라면, css에서는 @import라는 키워드를 이용하여 외부 파일들을 불러올 수 있다. @import 키워드를 이용하면 하나의 css 파일 내에서 외부 css 파일들을 여러 개 불러올 수도 있다. 이 때, css 내에서 @import 키워드를 이용하여 외부 css 파일을 불러올 때, 해당 키워드는 선택자 및 스타일 규칙을 지정하기 전에 미리 선언되어야 한다. 그래야 외부 css 파일 내 리소스들을 해당 파일 내에서 활용할 수 있기 때문이다. (한 파일 내에 여러 개의 외부 파일들을 불러올 수 있다는 점, 그리고 코드 맨 위에 작성하는 것이 좋다는 점은 파이썬에서의 import 키워드와 똑같다)
@import url('mycss.css');
@import "othercss.css";
h1 {
...
}
해당 키워드 뒤에는 불러오고자 하는 외부 css 파일의 파일 주소를 입력하며, 입력 방법은 위 예제처럼 url() 키워드 내 괄호 안에 작성하거나, 아니면 바로 쌍따옴표(또는 홀따옴표)를 이용하면 된다.
참고로, 불러오는 외부 css 파일 내에 미디워 쿼리가 있는 경우, 파일 주소 뒤에 해당 미디어 유형 및 조건문을 언급하여 해당 미디어 쿼리를 불러올 수 있다. 이에 대한 자세한 내용은 CSS - [반응형 웹] 미디어 쿼리 (Media query) 페이지 참조.
@import url("media-query.css") screen;
해당 키워드는 css 문법이기에 물론 HTML 문서 내 <style> 태그 내에서도 사용 가능하다.
참고로, <link> 키워드를 이용해 여러 개의 css 파일들을 한 HTML 문서 내에 불러들이려면 간단하게 <link> 태그를 여러 번 사용하면 된다.
<link> vs @import
여기까지만 보면, 서로 각각 HTML, CSS 문법이라는 것을 제외하곤 별 차이점이 보이지 않는 것 같다. 그러나 두 키워드는 큰 차이점이 하나 있는데, 외부 파일들을 로딩하는 방법에서 차이가 있다.
<link> 태그를 여러 번 사용한 경우, 외부 파일들을 병렬 방식으로 로딩해온다. 예를 들어, HTML 문서 내에 다음의 코드가 있다면…
<link rel="stylesheet" href="mycss1.css">
<link rel="stylesheet" href="mycss2.css">
<link rel="stylesheet" href="mycss3.css">
이를 웹 브라우저에서 실행하면, 위 3개의 파일을 동시에 불러온다. 이를 보통 병렬 로딩, 병렬 방식의 로딩이라는 표현을 쓴다.
반면, @import 키워드는 직렬 로딩 방식으로, 여러 개의 외부 파일들을 불러올 때 코드 상에서 위에서 아래로 하나씩 순차적으로 불러온다.
이러한 특성 때문에, 만약 불러들일 외부 css 파일들이 아주 많은 경우, @import 키워드 방식을 사용하면 <link> 방식에 비해 외부 파일들을 불러오는 시간이 더 많이 걸린다. 이러면 사용자 입장에서는 해당 웹 페이지 로딩 속도가 굉장히 느리다고 판단할 것이다. 결론적으로, 로딩할 외부 파일들이 많다면 <link> 태그를 쓰는 것이 로딩 속도면에서 더 좋다.
또한, References[1]에 따르면, 만약 @import 문으로 외부 CSS 파일을 불러오고, 자바스크립트도 같이 존재하는데, 해당 자바스크립트 내에서도 CSS 스타일 규칙을 조절하는 기능이 존재한다면, 자칫 오류가 날 수도 있다고 한다. 웹 브라우저에서는 HTML, CSS, JS 파일들을 로딩할 때 자바스크립트(JS) 파일을 먼저 받은 후 @import 문으로 로딩하는 외부 CSS를 그 뒤에 다운로드 받는 형식이라고 한다. 이로 인해, 자바스크립트에서 스타일 관련 기능을 처리하려면 먼저 외부 CSS 파일로부터 스타일들을 불러와야 하는데 이 순서가 거꾸로 되므로 오류가 일어날 수 있다고 한다.
또한, @import 방식은 Edge 브라우저에서는 처리가 안된다고 한다. → 이를 언급하는 자료들은 모두 2018~2020에 작성된 자료들이라서, 2024년 현재에도 똑같이 적용되는 사실인지는 모르겠다. (이를 Edge 브라우저 제작사는 과연 모를까? 아니면 알더라도 어떠한 이유로 해당 문제를 고치지 않은 것일까?)
참고: 로딩 시간 격차에 대한 반박, 그리고 내 생각
앞서, <link>와 @import 키워드는 각각 병렬 로딩, 직렬 로딩 방식으로, 외부 파일들을 불러오는 방식에서 차이가 있기 때문에, 대다수의 외부 파일들을 불러올 때 <link>가 더 빨리 로딩할 수 있다고 하였다. 그런데, 이에 대해 반박하는 글이 있어 이에 대해 짧게 소개하고자 한다. 다음은 해당 글의 주소이다.
CSS 임포트 방식은 성능에 얼마나 영향을 줄까? @import는 사용해선 안 될까?
References [7] 에 따르면, 해당 블로거는 이에 대해 의문점을 품어 직접 실험을 하였다고 한다. 그 결과, <link>, @import 키워드 방식은 로딩 시간에서 실제로는 큰 차이가 없다고 주장한다. 오히려 로딩 시간에 영향을 주는 것 중 하나는 CSS 파일 용량 크기라고 한다(용량 크기에 따른 로딩 시간에 대해서는 다른 자료들에서도 공통적으로 언급하는 부분이긴 한다). 더 자세한 내용은 해당 블로그를 참고하면 된다.
이에 대해, 로딩 시간에 차이가 있다고 주장하는 자료들은 대부분 2024년 현재로부터 조금 지난 과거인 2018~2022년대 자료들이 대부분이였다. 그리고 해당 블로그 글은 불과 현재 1월 기준 1, 2달 전에 작성된 비교적 최근 글이었다. 해당 글에 따르면 시간이 지나면서 기술도 발전하므로 이에 대한 권장되는 기술도 달라질 것이라 하는데, 이는 아직 웹에 대해 깊은 지식이 없는 나로서도 공감이 가는 말이다. 굳이 멀리갈 필요도 없이, 만약 어떤 고사양 게임을 하는데 너무 느리다 생각하면 더 좋은 그래픽 카드, 더 좋은 RAM, 더 좋은 사양의 컴퓨터를 사면 해결되는 부분이다. 시간이 지나면서 기술이 더더욱 발전하기에 예전에는 큰 문제라 여겨지던 속도 문제는 지금에 오면서 더더욱 작은 문제로 축소될 수밖에 없다고 생각한다. 이는 굳이 방금 예시로 든 하드웨어 장비 기술 뿐만 아니라, 인터넷 기술도 마찬가지라 생각된다. 즉, 인터넷 기술도 마찬가지로 시간이 지나면서 발전될 것이라고 생각하며, 이에 따라 권장되는 기술도 당연히 달라질 것이라 믿는다.
그러나 이와는 달리 아쉬운 점은, 로딩 시간 격차에 대한 반박글을 저 글 하나 밖에 찾지 못했고, 로딩 시간 격차가 발생한다고 주장하는 대부분의 자료들은 몇 년 전 자료라서 해당 글을 뒷받침하는 다른 글들이 없다는 점이다. 그래서 교차검증을 통해 해당 블로거의 주장이 다른 전문가들에게도 받아들여지는 주장인지 확인하기가 어렵다는 점은 매우 아쉬운 부분이다.
그럼에도, 앞서 언급한 @import 키워드의 Edge 브라우저 내 비인식 문제, 스타일 기능을 사용하는 JS 파일과 함께 사용할 때의 문제 등은 여전히 유효한 문제가 아닐까, 라는 생각이 든다. 이 주제에 대해 조사하면서 @import 키워드의 단점은 많았지만, <link> 태그에 대한 단점을 언급하는 글은 거의 없었다. 따라서 어떤 것을 쓸지는 각자 상황에 따라 알아서 판단해야겠지만, 특별한 경우가 아니라면 <link> 태그를 사용하는 것이 뒤탈이 없을 거라고 여겨진다.
References
[1] 고경희 - “Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석”, (이지스퍼블리싱, 2022)
[2] https://www.biew.co.kr/tag/Link 방식 vs %40import 방식 차이
[4] CSS 적용을 위한 또 다른 방법, @import
[5] @import - CSS: Cascading Style Sheets | MDN
[6] 뤼튼.ai 참고.
[7] <link>, @import 의 로딩 시간 차이에 대한 반박 블로그 글.
CSS 임포트 방식은 성능에 얼마나 영향을 줄까? @import는 사용해선 안 될까?
This content is licensed under
CC BY-NC 4.0
댓글남기기