우리는 웹 페이지에서 외부 CSS를 참조하는 두 가지 방법, 즉 @import와 link가 있다는 것을 알고 있습니다. CSS를 소개할 때 링크를 사용하는 것이 더 낫다는 말을 자주 듣습니다. 그런데 그 이유를 아시나요?
링크 
예제 소스 코드
[www.downcodes.com] 링크는 외부 CSS를 웹 페이지에 연결하는 것입니다. 구체적인 형식은 <link href="http://www.downcodes.com/styles.css" type="text/css" />입니다.
예제 소스 코드
[www.downcodes.com] 가져오기와 링크의 차이점은 여러 다른 CSS 파일을 하나의 CSS 파일에 도입할 수 있다는 것입니다. 구체적인 형식은 <style type="text/css">@import url("http://www.downcodes.com/styles)입니다. .css");</style>
@import를 사용하는 이유
대부분의 사람들은 오래된 브라우저가 @import를 지원하지 않기 때문에 @import를 사용합니다. 이는 @import를 사용하여 최신 브라우저에서만 구문 분석할 수 있는 CSS 스타일을 도입할 수 있다는 의미입니다.
IE6 이하 브라우저가 CSS를 구문 분석하지 못하도록 하려면 다음 코드를 사용하십시오. (IE6 이하의 방법은 복구가 불가능하므로 여기서는 생략하겠습니다.)
@import url(../style.css) 화면;
또 다른 주된 이유는 웹 페이지에 여러 외부 CSS 파일을 도입해야 하는 경우입니다. 링크를 사용하여 CSS를 도입한 다음 @import 메서드를 사용하여 이 CSS 파일에 여러 다른 CSS 파일을 도입해야 합니다.
링크를 사용하는 이유
링크 방법을 사용하는 주요 이유 중 하나는 사용자가 CSS 스타일을 전환할 수 있도록 허용할 수 있다는 것입니다. Firefox, Opera 및 Safari와 같은 최신 브라우저는 모두 rel="alternate stylesheet" 속성을 지원합니다. 즉, 다른 스타일을 선택할 수 있습니다. 물론, Javascript를 사용하여 IE를 활성화하여 사용자의 스타일 변경을 지원할 수도 있습니다.
@import에 대한 작은 문제. 웹 페이지의 헤드 태그가 @import 속성만 포함하여 매우 단순한 경우 사용자가 느린 인터넷 속도에서 탐색하면 스타일이 없는 페이지가 표시되고 CSS 파일은 다음과 같이 표시됩니다. 이 문제를 방지하려면 헤드에 스크립트나 링크 태그가 하나 이상 있는지 확인해야 합니다.
현재로서는 어떤 방법을 사용해야 할까요? 소규모 웹사이트에서는 링크를 사용하는 것이 더 적합(또는 더 대중적)인 것 같습니다. 물론 앞으로 CSS를 모듈화해야 한다면 반드시 @import를 사용할 것입니다.
이 기사는 학습 목적으로 @import와 CSS의 차이점이 무엇입니까?에서 부분적으로 번역되었습니다. 추가를 환영합니다.
