WEB/HTML

[HTML] HTML <link> 태그를 통한 리소스 불러오기

2021-03-25

자신의 사용하고 있는 디렉터리 및 외부 요소를 가져오고자 할 때 link 태그를 사용한다. 주로 외부에 저장되어 있는 css 스타일 시트(stylesheet)를 연결하고자 할때 사용한다. 구체적인 사용법을 알아보도록 하자.

- 리소스 css 파일 준비

우선적으로 스타일시트로 사용하고자 하는 css 파일을 만들어주어야 한다. 해당 파일은 어디에 만들어 두었든 크게 상관은 없지만 앞으로 계속해서 사용할 스타일시트 (css)파일이라면 한 곳에 잘 정리해서 두는 것이 좋다.

이후 생성된 파일에 아래와 같은 옵션을 부여해주었다. div태그 중심으로 넓이와 높이 배경색을 지정하였다.

@charset "UTF-8";


/* div 태그에 공통된 속성 부여  */
div{
	width: 300px; /* 넓이 속성  */
	height: 300px;/* 높이 속성 */
	background: gray; /* 배경색 속성  */
}

- css 파일 link로 불러오기

이제 준비된 파일을 다른 html 문서에서 불러와 스타일시트를 적용해 보도록 하자. 아래는 스타일시트를 적용할 html 코드이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href ="/자신이 저장한 파일위치/Test.css" rel="stylesheet">
</head>
<body>
<div>--------This is Test--------</div>
</body>
</html>

여기서 봐야할 코드 <link href ="/자신이 저장한 파일 위치/Test.css" rel="stylesheet">이다. 여기에서의 href의 속성 값은 해당 css 스타일시트가 저장된 위치를 넣어주면 된다. 다음 rel은 속성은 불러온 파일을 사용할 목적 정도로 해석할 수 있으며, 우리는 stylesheet로 사용할 거기 때문에 stylesheet로 적어주면 된다. 결과를 확인해 보면 아래와 같다. 직접적인 스타일은 html내부에서 부여하지 않고 link로 불러오는 것만으로도 스타일 정상적으로 적용되는 것을 확인할 수 있다.

- 이외의 속성들

* seizes: 파비콘등을 지정할 때 사이즈를 조정할 목적으로 사용된다.

* type: 지정된 파일의 MIME 타입을 지정해줄 때 사용한다. ex) image/jpg

* media: 미디어 유형이나 해당 유형의 쿼리문을 지정해 줄 때 사용한다.

저작자표시 비영리

'WEB > HTML' 카테고리의 다른 글

[HTML] img 태그 리소스 404 및 불러올 수 없을때 처리방법 (0)	2023.09.08
[HTML] HTML Text Formatting 태그들 알아보기 (0)	2021.04.18
[HTML] HTML button 의 type 종류들 (submit/button/reset) (0)	2021.03.19
[HTML] 이클립스 UTF - 8 / EUC-KR 인코딩 변경하는 방법 [한글깨짐해결] (0)	2021.03.03
HTML 태그 <p> <br>줄바꾸기 <img>이미지 삽입 <table> 표삽입 (0)	2020.05.23

Contents

새소식

인기 검색어