[CSS]@import와 중 어느 것을 사용해야 할까?
현재 글을 다듬고 있는 중입니다. 언제 될지는 모르겠지만
CSS를 문서에 적용할 때 사용하는 방법 중 @import와 <link> 의 차이가 무엇입니까?
일단 이 두가지 중 한 가지를 사용하기 위해서는, 우선 이 2개가 각각 어떤 용도로 사용되기 위해 만들어졌는지를 파악해야 합니다.
<link> – 이건 흔히 외부 CSS를 문서에 연결하는 첫번째 방법입니다. 이건 웹 페이지와 CSS를 같이 연결하기 위해 만들어졌는데, 문서에서 <head>테그 사이에 넣습니다.
@import – CSS를 다른 CSS에 가져오도록 합니다. 이건 앞서 언급한 연결하는 것과는 약간 다른 것이, 이건 연결된 스타일 시트를 가져올 수 있기 때문이죠. 만약 문서 상단 head에 넣는다고 하면 다음처럼 넣습니다. :
<style type=”text/css”> @import url(“style.css”); </style>
일반적으로 보면, 두개 사이에 별다른 차이가 없어 보입니다. 둘다 올바른 방법이기도 하고, 대부분의 경우 둘 다 똑같이 동작하기 때문이죠. 하지만 각각 다른 방법으로 썼을 때 장단점이 몇가지 있습니다.
왜 @import를 사용하는가?
<link>대신 @import를 사용하는 가장 일반적인 이유로는 우선 오래된 브라우저는 @import를 인식을 하지 않기 때문입니다. 그래서 오래된 브라우저에서는 스타일을 숨길 수 있습니다. 구체적으로는 다음과 같습니다.
넷츠케이프4, IE 3,4(4.72 제외)에서 스타일 숨기기 위해서는
@import url(../style.css);
그리고 컨커러 2와 아마야 5.1에서도 숨기려면
@import url(“../style.css”);
와 같이 사용하며, 넷츠케이프 4, IE6 혹은 그 이하 버전에서 숨기려면
@import url(../style.css) screen;
그리고 넷츠케이프 4, IE 4 혹은 그 이하 버전 그리고 컨커러 2에서 숨기려면
@import “../styles.css”;
와 같이 쓸 수 있습니다.
다른 이유로는 문서상 여러 스타일 시트를 사용해야 하는데, head상에 link가 하나 밖에 없을 때입니다. 예를 들어, 기업 사이트에는 모든 페이지에 적용되는 전역 스타일 시트와 각각의 별개의 지역 스타일이 적용된 세부 요소들이 있습니다. 지역 스타일을 링크하고 전역 스타일을 지역 스타일 위에 가져오도록 @import를 사용하면, 모든 사이트의 세부 요소를 포함한 거대한 스타일 시트를 만들 필요가 없어집니다. 단지 @import를 다른 스타일 규칙보다 위에 와야 하는 것이죠. 그리고 상속 기능은 계속 문제가 될 수 있습니다.
왜 <link>를 사용하는가?
link를 사용하여 스타일 시트를 연결하는 이유 중 하나는 고객에게 대체 스타일 시트를 제공하기 위함입니다. 파이어폭스나 사파리, 그리고 오페라 같은 브라우저들은 rel=”alternate stylesheet” 속성을 지원하며 사용자들이 이를 바꿀 수 있도록 할 수 있습니다. 또한 IE에서는 JavaScript를 이용한 switcher를 이용하여 다른 스타일 시트로 전환할 수 있습니다. 이것은 접근성을 위해 줌 레이아웃과 함께 가장 많이 사용됩니다.
@import를 이용하는데 한 가지 단점은, head테그에 @import만 있는 간단한 head로 구성되어 있을 경우 스타일이 로딩되는 동안 순간적으로 스타일이 적용되지 않은 페이지가 보여질 것입니다. 이건 사용자에게 거슬릴 수 있습니다. 이 문제는 간단하게 head에 <link>나 <script>를 최소 1개 이상 넣어줌으로써 해결 할 수 있습니다.
Media Type의 경우는 어떤가요?
많은 작자들이 미디어 타입을 통해 오래된 브라우저에서 스타일을 숨길 수 있다고 합니다. 흔히 @import와 link를 사용함으로써 볼 수 있는 이득으로 언급되는데요, 사실 두가지 방법 모두 다 media type을 지정할 수 있으며, media type을 지원하지 않는 브라우저도 둘 중 어떤 방법을 써도 media type이 지정된 스타일을 인식하지 않습니다. 예를 들어 넷츠케이프4는 media type을 인식하지 않으므로, link를 사용하여 스타일 시트를 숨길 수 있습니다 :
<link href=”styles-nons4.css” media=”all” type=”text/css” />
그리고 몇몇 IE(6버전 이하)는 @import에 적용된 media type을 지원하지 않으므로 다음과 같이 써서 스타일을 숨길 수 있습니다 :
<style type=”text/css”>@import url(styles.css) all;</style>
당신은 어떤 걸 사용하나요?
개인적으로, 저는 마크업 문서상에서는 <link>를 사용하고, 외부 스타일에 import로 스타일 시트를 가져오는 것을 선호합니다. 그 방법을 이용해서 마크업 문서에 적용하는데 1~2줄의 코드만 있으면 됩니다. 하지만 결국엔 본인의 선택에 달린 겁니다. 만약 @import가 편하다면 그걸로 쓰세요. 두 가지 방법 모두 표준 마크업이며, 정말 너무 오래된 브라우저를 지원할 거 아니라면(넷츠케이프4 같은) 두가지 따로 구분해서 써야할 큰 이유는 없습니다.
발번역 : JH
원문 : http://webdesign.about.com/od/beginningcss/f/css_import_link.htm