Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 요소 사용법 완벽 가이드

HTML <link> 요소를 사용하는 방법을 알아보세요.

link 요소란 무엇인가?

HTML <link> 요소는 주로 웹사이트에 스타일을 적용하는 외부 CSS 파일을 불러올 때 사용됩니다. 하나의 CSS 파일을 여러 페이지에서 공유할 수 있어 유지보수가 쉬워지고, 코드 관리도 훨씬 효율적입니다.

<link> 요소는 <head> 요소 내부에 위치하며, 여러 종류의 속성을 받을 수 있습니다:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

핵심 속성: href와 rel

가장 많이 사용되는 <link> 요소의 속성은 위 예제에서 볼 수 있는 href와 rel 두 가지입니다:

  • href: 연결할 파일의 위치를 지정합니다. 위 예시에서는 main.css라는 이름의 스타일 시트를 가리킵니다.
  • rel: relationship(관계)의 약자로, 현재 문서와 연결된 CSS 파일 사이의 관계가 무엇인지 지정합니다.

style 요소와의 비교

웹사이트에 스타일을 적용하는 또 다른 방법은 <style> 요소를 사용하는 것입니다. 이 방식은 CSS를 문서 내부에 직접 작성하며, 흔히 인라인(내부) CSS라고 부릅니다.

다만 현대적인 웹 개발에서 권장되는 방식은 <link> 요소를 통해 스타일을 불러오는 것입니다. 스타일 파일은 프로젝트 폴더 내부(your-project/styles/main.css)에 둘 수도 있고, 다른 도메인에 있는 외부 CDN 등의 제공자로부터 가져올 수도 있습니다.

알아두면 좋은 점

같은 문서에서 <style> 요소와 <link> 요소를 동시에 사용하면, 의도치 않게 스타일이 덮어써지기 쉽습니다.

예를 들어 아래처럼 두 가지 방식을 함께 사용하는 경우를 살펴보겠습니다:

<!DOCTYPE html>
<html>
  <head>
    <!-- 문서 내부에 직접 작성한 스타일 -->
    <style>
      h1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
    <!-- 외부 스타일 시트 불러오기 -->
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <h1>빨간색 제목</h1>
    <p>초록색 단락</p>
  </body>
</html>

만약 외부 스타일 시트에서 h1과 p 선택자에 색상 값을 정의했다면, 예를 들어 bluered와 green 값은 덮어써집니다. 그 이유는 위 마크업 예제에서 <link> 요소가 <style> 요소보다 뒤에 오기 때문입니다.

이런 실수는 생각보다 자주 발생합니다. 따라서 일반적으로는 <link> 요소를 사용해 스타일을 불러오는 방식으로 통일하고, <style> 요소는 특별한 경우에만 사용하는 것이 좋습니다.