HTML에 외부 CSS 스타일 시트를 적용하는 방법

Original article: External CSS Stylesheets – How to Link CSS to HTML and Import into Head

외부 CSS 파일을 연결하는 것은 그 어떤 HTML 템플릿에서도 중요한 부분입니다. 그럼 지금부터 이 글을 통해 어떻게 외부 CSS 파일을 연결하는지에 대해 알아보겠습니다.

CSS 파일을 HTML 파일과 연결하기

CSS 파일을 HTML 파일에 연결하기 위해서 HTML 파일의 head 요소 안에 link 요소를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

link 요소는 다양한 용도로 사용됩니다. 그리고 외부 CSS 스타일시트를 연결하기 위해서는 알맞은 속성을 사용하는 것이 중요합니다. 그럼 몇 가지 중요한 속성들을 살펴보도록 하겠습니다.

두 가지 필수 속성 중 첫 번째인 rel 속성입니다. 이 속성을 사용하여 브라우저에 현재 문서와 링크된 문서 사이의 연관 관계를 알려줄 수 있습니다.

rel="stylesheet"를 사용해 브라우저에 어떤 스타일시트를 사용할 것인지 알려줍니다.

두 번째 필수 속성인 href는 가져올 파일을 지정하는 역할을 합니다.

보통의 경우에 CSS 파일과 HTML 파일은 같은 폴더 안에 있습니다. 이럴 때 href="style.css"를 사용할 수 있습니다.

만약 CSS 파일과 HTML 파일이 다른 폴더에 있다면 HTML 파일에서 CSS 파일로 가는 올바른 경로를 적어야 합니다.

예를 들어, CSS 파일이 HTML 파일의 형제 폴더 안에 있는 아래와 같은 상황입니다.

project --- index.html
            css ---------- style.css

이 경우에는 "css/styles.css" 를 경로로 적으면 됩니다.

<link rel="stylesheet" href="style.css" type="text/css" />

type 속성을 사용하여 연결할 리소스의 타입을 정의합니다. 스타일시트의 경우 text/css 가 타입이 됩니다. 그러나 css가 웹에서 사용되는 유일한 스타일시트 언어이기 때문에, 타입은 포함하지 않는 것이 일반적입니다.

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)" />

media 속성은 선택적 속성으로, 언제 특정 스타일시트를 불러올지 지정하는 데에 사용합니다. 이 속성의 값은 반드시 미디어타입 / 미디어 쿼리여야 합니다.

이 속성은 다른 스크린 사이즈와 장치에 각각 다른 스타일을 적용하고자 할 때 유용합니다.
이것을 위해서는 각각의 CSS파일을 자체 link 요소와 함께 가져와야 합니다.

아래 문서들을 통해 미디어 쿼리를 위해 어떤 속성값들을 사용할 수 있는지 더 알아볼 수 있습니다.

이 글에서는 link 요소와 href, src 속성을 사용하여 외부 스타일시트를 웹 페이지에 추가하는 방법을 배웠습니다.

또한 여러 개의 스타일시트를 불러오고 media 속성을 사용하여 언제 어떤 스타일시트를 적용할지에 대해 배웠습니다.

그럼 재밌게 웹 페이지를 만드세요!