@import 방식

1. CSS @import를 이용하여 외부문서로 CSS를 불러와 적용하는 방식

 

 

즉, <link>는 html에서 외부 링크를 가져오는것이지만, @import는 CSS에서 외부 CSS를 가져올때 사용하는것이다.

/* common1.css */
@import url("./common2.css");

/* common2.css */
div{
	color : red;
    font-size : 20px;
}

다음과 같이 입력이 된다면, common1.css는 common2.css의 내용을 들고왔다는 것이다.

 

 

<link>	@import
html에서 외부 링크를 가져오는것	CSS에서 외부 CSS를 가져오는것
병렬방식 호출	직렬방식 호출
한꺼번에 호출하기 때문에 시간이 단축됨	CSS에서 작업이 끝난 후에 다음 CSS가 호출이 되기때문에 시간이 오래 걸림
	link로 한꺼번에 호출했을때 오류가 생겨서, 먼저 호출된 CSS작업이 끝내고 다음 CSS를 사용하는것이 좋을때 사용함