HTML의 <link> 요소에서 href 속성은 외부 리소스의 URL을 지정하는 데 사용됩니다. 스타일시트, 파비콘 등 외부 문서를 현재 HTML 문서에 연결할 때 필수적인 속성입니다.
href 속성 기본 문법
<link href="url">
여기서 url은 연결하려는 외부 문서의 주소를 의미합니다. 상대 경로와 절대 경로 모두 사용할 수 있습니다.
사용 예제
다음은 <link> 요소의 href 속성을 활용해 외부 CSS 파일을 연결하는 예제입니다.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="new.css"> </head> <body> <h1>데모 제목</h1> <p>데모 텍스트입니다.</p> </body> </html>
위 코드에서는 <head> 태그 안에 <link> 요소를 배치하고, href 속성을 통해 외부 문서인 new.css 파일을 연결했습니다.
연결된 CSS 파일(new.css) 내용
h1 {
color: blue;
}
p {
background-color: red;
}실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다. new.css 파일에 정의된 스타일이 적용되어 제목(h1)은 파란색으로, 단락(p)은 빨간색 배경으로 표시됩니다.
핵심 정리
- rel 속성: 연결된 문서와 현재 문서의 관계를 정의합니다(예: stylesheet).
- type 속성: 연결되는 리소스의 MIME 타입을 지정합니다(예: text/css).
- href 속성: 외부 리소스의 실제 URL 경로를 지정합니다.
이처럼 href 속성은 HTML 문서와 외부 리소스를 연결하는 핵심 역할을 하며, 웹 페이지의 구조와 디자인을 분리하는 데 중요한 요소입니다.