1.

방식은 HTML 파일에 별도의 파일(주로 CSS)을 가져와 적용할 때 사용한다.

<link rel="stylesheet" href="style.css">

🔗 type=”text/css”

과거에는 CSS 외에 다른 스타일시트 언어(XSL 등)를 구분하기 위해 type 속성을 사용했지만
현재는 CSS가 웹 표준이고 HTML5 부터는 type 의 기본값을 text/css 로 지정했기 때문에
생략 가능하다.

다음과 같은 특징이 있다.

HTML <head> 섹션에 위치
브라우저가 HTML을 파싱하는 동안 즉시 로드
여러 CSS 파일을 병렬로 다운로드

2. @import

@import 방식은 CSS 파일에서 또 CSS 파일을 가져올 때 사용한다.

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

// default.css
@import "header.css";
또는
@import url("header.css");

🔗 SASS / SCSS 에서의 @import

SASS / SCSS에서 @import는 CSS의 @import와는 다르게 컴파일 시점에 처리되어 최종적으로 하나의 CSS 파일로 병합한다. 이를 통해 여러 파일을 로드하는 것보다 효율적으로 사용할 수 있다.

다음과 같은 특징이 있다.

CSS 파일 내부나 <style> 태그 내에서 사용
CSS 파일 맨 앞에 위치해야 함 (다른 규칙보다 우선시)
중첩해 사용가능 (CSS 파일에서 다른 CSS 파일 로드 가능)

차이점

1. 로딩순서

<link>: 병렬로 로드되어 더 빠르다.
@import: 직렬로 로드되어 상대적으로 느리다.

✅ 브라우저는 HTML을 파싱하면서 각 <link> 태그를 독립적으로 해당 리소스를 다운로드한다.
또한 여러 리소스를 동시에 요청 가능한 멀티스레드 리소스 로더를 가지고 있기 때문에 병렬로 처리할 수 있다.
브라우저는 CSS 파일을 다운로드하고 파싱하면서 순차적으로 읽어내려가는데 CSS 내부에 위치하는 @import 규칙을 만나게 되면 해당 리소스를 다운로드하고 파싱해야 다음단계로 넘어 갈 수 있다.
이는 이전에 정의된 스타일이 이후의 스타일에 영향을 줄 수 있는 CSS 의 캐스케이딩 규칙 때문이다.
이를 통해 브라우저는 CSS파일을 완전히 파싱하기 전까지 @import 된 리소스를 파악하기 어렵기 때문에 전체적인 로딩 프로세스가 더 느려진다.

2. JavaScript를 통한 조작

<link>: DOM API를 통해 동적으로 추가/제거할 수 있다.
@import: JavaScript를 통해 직접 조작하기 어렵다.

✅ <link> 는 DOM의 일부이기 때문에 직접 접근하여 조작이 가능하지만
@import 는 CSS 내부에 있어 접근을 통한 조작이 어렵다.

3. 캐싱

<link>: 개별 파일로 캐시되어 효율적이다.
@import: 포함된 파일이 주 CSS 파일과 함께 캐시되어 개별 업데이트가 어렵다.

✅ 브라우저가 HTML을 파싱하면서 <link> 태그를 만나면 CSS 파일에 대한 HTTP 요청을 보내게 되는데 서버는 CSS 파일과 캐싱 관련 정보를 응답한다. 이후 디스크나 메모리에 저장하고 같은 URL의 CSS 파일이 요청되면 브라우저는 먼저 캐시를 확인하고 유효한 경우 캐시된 버전을, 아닌경우 새 CSS파일을 사용하고 캐시를 업데이트 한다. 별도로 다운로드 하기에 독립적으로 캐시된다.
브라우저는 CSS 파일을 파싱하면서 @import 규칙을 만나면 각각 캐싱하게 되는데 이후에 캐시를 확인하게 되는 경우 내부의 중첩 구조를 통해 캐시를 확인해야하기 때문에 복잡하고 더 오래 걸릴 수 있다.