css파일 한군데에서 import하기 @import vs link

style.css 파일에 작성 한것 입니다.

@import "reset.css";
@import "header.css";
@import "footer.css";
@import "main.css";

Link 방식 vs @import 방식
결과적으로 보면 같아 보일 수 있겠지만, 사실은 Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.
@import 방식의 장, 단점
CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식이다.
하나의 CSS파일에 여러개의 페이지 CSS를 로드시켜 편리하다고 생각하면, 편리하다고도 할 수 있다.
그러나 성능을 생각한다면 그리 좋은 방법은 아니다. @import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 @import 방식을 사용할 경우 @import된 CSS파일을 적용하지 못한다.

Link 방식의 장, 단점
HTML의 Link태그를 사용하는 CSS연결 방식이다.
필자가 사용하는 CSS연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 CSS파일을 다운로드 하지 않는 일이 발생하지 않는다.
사용방법은 아래와 같습니다.