[HTML] <link>태그와 @import

Bam·2022년 2월 11일

Link태그 html

HTML

목록 보기

21/23

웹 문서를 꾸밀때 주로 외부 스타일 시트를 적용합니다. 이번에는 외부 스타일 시트를 적용하는데 사용하는 <link>태그에 대해서 알아보겠습니다.

`<link>`

<link>는 외부 파일을 연결할 때 사용하는 태그입니다. 이 태그는 닫는 태그가 존재하지 않습니다. 그리고 <head>태그 사이에 삽입한다는 특징이 있습니다.

<link href='외부 파일 경로' rel='stylesheet' type='text/css'>

href에 지정된 경로의 파일이 stylesheet이고, css라면 css를 적용시킵니다.

@import

외부 스타일 시트를 적용하는 방식에는 <link>말고 한 가지 방식이 더 있는데, @import가 그 예입니다.

@import는 <head>태그 내부에 정의된 <style>태그 내부에서 사용합니다.

<head>
  <style>
    @import url('파일 경로') [미디어 쿼리 옵션]
  </style>
</head>

미디어 쿼리 옵션은 불러오는 기기에 다른 조건입니다. 요즘 시대에는 스마트폰, 태블릿, 노트북, pc 등 다양한 환경에서 웹 페이지에 접근하는데요. 미디어 쿼리 옵션을 통해 기기, 브라우저에 대한 개별 설정을 할 수 있습니다. 이 내용은 추후에 따로 다시 다루겠습니다.

`<link>` VS @import

그렇다면 우리는 <link>와 @import중에서 어떤 것을 사용해야할까요?

정답은 <link>태그입니다. 그 이유는 <link>태그는 @import보다 안정적인 동작을 하고 동작 속도도 더 빠르기 때문입니다. 웹 페이지는 갈수록 많은 정보와 많은 파일들을 내포하고 있기 때문에 안정성을 중요시해야하고, 속도도 보장해 좋은 경험을 제공해야합니다. 따라서 외부 스타일 시트를 이용할 때에는 <link>태그를 사용하는 것이 현재는 더 좋은 방법이라고 할 수 있습니다.