2025. 4. 1. 14:14ㆍWEB/HTML
이번 포스팅은 <link> 태그에 대해 배워본다.
<link>
link 태그가 무엇인가?
TCP school 사이트를 통해 link 태그의 정의를 찾아봤다. (출처 : TCPSchool)
위 정의에서 확인할 수 있듯이 link 태그는 외부 소스와 link 태그가 적용된 문서와의 관계를 정의할 때 사용된다.
관계를 정의한다는 건 단순히 외부 소스와 본 문서를 연결해준다는 뜻으로 이해하면 될 것 같다.
<link> 태그 자체는 빈 태그이고, 속성을 넣어 사용해야한다.
그리고 <link> 태그는 <head> 태그 내부에만 위치할 수 있고, 그 개수에는 제한이 없다.
<link> 태그 요소는 주로 스타일 시트를 연결할 때 사용된다.
link 태그에 사용되는 속성에 대해 알아보자.
rel (relationship)
rel 속성은 <link> 태그가 HTML문서와 외부 리소스 사이의 관계를 정의하는 속성이다.
link 태그로 연결된 리소스가 어떤 종류의 파일인지를 브라우저에게 알려주는 역할을 한다.
속성값에는 stylesheet, icon 등이 있다.
href (Hyperlink Reference)
href 속성은 <link> 태그가 연결할 외부 파일의 경로(=URL)를 지정하는 속성이다.
연결할 파일의 경로를 href 속성으로 지정하고,
rel 속성으로 연결할 리소스 파일의 종류를 정의해주어야 link 태그가 문서에 적용된다.
이 속성들을 사용해 간단하게 예제 파일을 만들어보자.
HTML 문서와 CSS 문서를 아래와 같이 작성해봤다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테스트용 Stylesheet</title>
<!-- CSS 연결 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>h1태그 CSS 적용</h1>
<p>
p 태그 CSS 적용
</p>
</body>
</html>
CSS
/* 전체 배경색 변경 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
text-align: center;
}
/* 제목 스타일 */
h1 {
color: #007bff;
font-size: 2.5rem;
}
/* 문단 스타일 */
p {
color: #333;
font-size: 1.2rem;
}
CSS에 대해서는 아직 잘 모르지만,
우선 샘플로 CSS 문서를 위와 같이 작성하고 HTML 문서도 작성해줬다.
이걸 웹브라우저에서 실행해보면 아래와 같이 출력된다.
CSS stylesheet를 적용하지 않은 HTML 문서를 웹브라우저에서 실행해보면 아래와 같이 출력된다.
HTML 문서의 <link> 태그 부분을 주석 처리하고 문서를 웹브라우저에서 실행해보자.
<link> 태그를 사용해 HTML 문서에 연결할 파일의 종류를 스타일시트로 정의해줬고, (rel="stylesheet")
CSS 파일의 경로를 href 속성으로 지정해줬다. (href="styles.css")
간단하게 link 태그를 사용하는 방법에 대해 알아봤다.
CSS 관련 파일을 문서에 적용하기 위해서는 꼭 필요한 태그이니 사용법을 꼭 숙지해놓도록 하자.
보다 자세한 사용방법은 다음에 CSS를 공부하게 되면 그때 배워본다.
끝.
'WEB > HTML' 카테고리의 다른 글
| [HTML] 클라이언트 사이드 스크립트를 정의하는 <script> 태그를 배워보자 (0) | 2025.04.09 |
|---|---|
| [HTML] 이미지를 삽입해주는 <img> 태그를 배워보자 (0) | 2025.03.30 |
| [HTML] HTML 문서 안의 또 다른 HTML 문서 <iframe> 태그를 배워보자 (0) | 2025.03.25 |
| [HTML] 다른 웹페이지로 이동 시켜주는 <a> 태그를 배워보자 (0) | 2025.03.19 |
| [HTML] 의미없는 태그 <div> 태그를 배워보자 (0) | 2025.03.19 |