HTML <link> 요소를 사용하는 방법

HTML <link> 사용 방법 알아보기 요소.

HTML <link> 요소는 주로 웹사이트에 스타일을 추가하는 외부 CSS 파일을 가져오는 데 사용됩니다.

<link> 요소는 <head> 안에 있습니다. 요소이며 여러 유형의 속성을 허용합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

가장 일반적인 <link> 요소 속성은 위에서 본 두 가지, href입니다. 및 rel :

href 링크된 파일의 위치를 지정합니다(이 경우 main.css라는 스타일 시트).
rel 관계를 나타내며 내부에 있는 문서와 연결된 CSS 파일 간의 관계를 지정합니다.

웹사이트의 스타일을 지정하는 다른 방법은 <style>를 사용하는 것입니다. 문서 내부에 직접 CSS 스타일을 포함할 수 있는 요소(인라인 CSS라고도 함) ).

그러나 웹사이트를 스타일링하는 현대적인 방법은 <link>를 사용하는 것입니다. 자신의 프로젝트 폴더 your-project/styles/main.css에서 스타일을 가져오려면 , 또는 외부 제공업체(다른 도메인).

알아두면 좋은 정보:

<style>를 모두 사용하는 경우 및 <link> 요소를 동일한 문서에서 스타일로 지정하면 실수로 스타일을 재정의하기 쉽습니다.

예를 들어 두 가지 스타일 지정 방식을 모두 사용하는 다음 예를 살펴보세요.

<!DOCTYPE html>
<html>
  <head>
    <!-- Embedded (internal) styles -->
    <style>
      h1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
    <!-- Import external style sheet -->
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <h1>This is a red heading</h1>
    <p>This is a green paragraph</p>
  </body>
</html>

예를 들어 외부 스타일시트는 h1의 색상 속성 값을 정의합니다. 및 p 선택기, 예:blue을 주어 색상 값, 다음 red 및 green <link> 때문에 덮어쓰게 됩니다. 요소는 <style> 뒤에 옵니다. 위의 마크업 예제의 요소입니다.

이것을 섞는 것은 너무 쉽기 때문에 일반적으로 <link>를 계속 사용하는 것이 좋습니다. 스타일을 가져오는 요소 — <style>만 사용 매우 구체적인 사용 사례를 위한 요소입니다.

HTML 요소를 사용하는 방법

알아두면 좋은 정보: