우리는 웹 페이지에서 외부 CSS를 참조하는 두 가지 방법, 즉 @import와 link가 있다는 것을 알고 있습니다. CSS를 소개할 때 링크를 사용하는 것이 더 낫다는 말을 자주 듣습니다. 그런데 그 이유를 아시나요?
링크
링크는 외부 CSS를 웹 페이지에 연결하는 것입니다.
@수입
가져오기와 링크의 차이점은 여러 다른 CSS 파일을 하나의 CSS 파일에 도입할 수 있다는 것입니다.
@import를 사용하는 이유
대부분의 사람들은 오래된 브라우저가 @import를 지원하지 않기 때문에 @import를 사용합니다. 이는 @import를 사용하여 최신 브라우저에서만 구문 분석할 수 있는 CSS 스타일을 도입할 수 있다는 의미입니다.
IE6 이하 브라우저가 CSS를 구문 분석하지 못하도록 하려면 다음 코드를 사용하십시오. (IE6 이하의 방법은 복구가 불가능하므로 여기서는 생략하겠습니다.)
@import url(../style.css) screen; 또 다른 주된 이유는 웹 페이지에 여러 외부 CSS 파일을 도입해야 하는 경우입니다. 링크를 사용하여 CSS를 도입한 다음 이 CSS 파일에서 @import 메소드를 사용할 수 있습니다. 여러 다른 CSS 파일이 관리하기 더 쉬워 보입니다.
링크를 사용하는 이유
링크 방법을 사용하는 주요 이유 중 하나는 사용자가 CSS 스타일을 전환할 수 있도록 허용할 수 있다는 것입니다. Firefox, Opera 및 Safari와 같은 최신 브라우저는 모두 rel="alternate stylesheet" 속성을 지원합니다. 즉, 다른 스타일을 선택할 수 있습니다. 물론, Javascript를 사용하여 IE를 활성화하여 사용자의 스타일 변경을 지원할 수도 있습니다.
이해가 안 되시면 이 페이지에 들어가 Firefox에서 "보기 - 페이지 스타일"을 클릭하세요.
@import의 작은 문제
웹 페이지의 헤드 태그가 @import 속성만 포함하여 매우 간단한 경우 사용자가 느린 인터넷 속도에서 탐색할 때 스타일이 없는 페이지가 표시되고 CSS 파일이 다운로드되는 동안 페이지를 볼 수 있습니다. 이러한 문제를 방지하려면 헤드에 최소한 하나의 스크립트 또는 링크 태그가 있는지 확인해야 합니다.
04-11 업데이트: @import로 인해 CSS의 전체 로딩 시간이 길어지고 IE에서 파일 다운로드 순서가 변경됩니다. 예를 들어 @import 이후에 배치된 스크립트 파일은 CSS보다 먼저 다운로드됩니다.
자세한 내용은 http://www.stevesouders.com/blog/2009/04/09/dont-use-import/를 참조하세요.
어떤 방법을 사용해야 합니까?
현재로서는 링크가 소규모 웹사이트에 더 적합하거나 더 인기 있는 것 같습니다. 물론 향후 CSS를 모듈화해야 한다면 반드시 @import를 사용할 것입니다.