<tag에 관하여>
외부 문서를 연결하여 사용하게 해주는 태그 - link
-요약설명
- link태그는 외부문서를 연결시키는 태그입니다. 주로 CSS 파일같은 스타일시트를 연결하거나 JS파일을 연결하는 등 외부문서를 사용할 수 있게 해줍니다.
-심화설명
·link 요소
<head></head>태그 사이에서 여러 link를 삽입할 수 있으며, 단일태그로 </link>닫는 태그가 존재하지 않습니다. link와 함께 사용할 수 있는 속성으로는 href=" "이 대표적으로 있으며 주소를 링크하는 곳 입니다. 주소는 절대주소, 상대주소로 표현할 수 있는데 절대주소란 현재 작성하고 있는 HTML파일의 위치와 상관없이 link가 가능한 주소(어떠한 웹페이지나 파일이 가지고 있는 고유한 경로)이고, 상대주소란 현재 작성하고 있는 HTML파일을 기준으로 link할 파일이 있는 위치를 지정해주는 경로를 설정하는 것입니다. link태그 안에 rel속성은 보통 stylesheet로 정해져 있는데, 몇가지 종류가 있습니다.
rel속성 종류
alternate(대체페이지) |
author(저자) |
help(도움말) |
icon(아이콘) |
license(저작권) |
prev(이전페이지) |
next(다음페이지) |
prefetch(프리패치) |
search(검색페이지) |
stylesheet(스타일시트 파일) |
절대경로의 경우 css파일을 C://venveis/common/css/hardstudy.css 이런식으로 처음부터 잡아가는 것입니다. google이나 포털사이트에서 이미지를 바로 불러올때 예제1(아래). 처럼 마우스 오른쪽 버튼 클릭 후 url주소를 복사하여 사용할 수도 있습니다. 이는 절대주소를 이용하여 서버에 올라간 url의 주소를 입력하여 개인 서버에 있는 경로의 사진을 바로 링크하여 사용하는 것입니다. 자세히 보시면 /image 라는것이 보이실겁니다. 이는 티스토리 서버에 image파일 안의 "991DB2415AA3EFB603E836"파일명을 불러 오겠다는 뜻입니다.
상대경로의 경우 현재의 파일의 위치를 기준으로 링크하려는 파일의 위치를 잡아주는 것이며, 예제2(아래)와 같이 표현할 수 있습니다. 이는 현재위치에서 (..)상위 디렉토리로 이동 후 (/)들어갑니다. css폴더로 그곳에서 (/)들어갑니다. play_study.css 파일로 라는 뜻입니다. 보시는 바와같이 html이 존재하는 어떤 곳에서 상위 디렉토리로 이동한 후 css파일이 있는 상대적인 위치를 지정해준 것을 알 수 있습니다.
HTML의 본질은 page와 page를 연결하는 Link이기 때문에 잘 알아두는게 좋습니다.
-참고사항
"/" : 루트(진입하기) ".." : 뒤로가기
표기법
<head>
<meta charset="UTF-8">
<title>link</title>
<link rel="stylesheet" href="link_study.css">
</head>
예제1
<body>
<img src="https://t1.daumcdn.net/cfile/tistory/991DB2415AA3EFB603" alt="사진">
</body>
예제2
<head>
<meta charset="UTF-8">
<title>link</title>
<link rel="stylesheet" href="../common/css/play_study.css">
</head>
'Rich Venveis의 연구노트 > HTML' 카테고리의 다른 글
| [HTML][tag] img (0) | 2018.03.19 |
|---|---|
| [HTML][tag] div (0) | 2018.03.15 |
| <tag>head, meta (0) | 2018.03.09 |
| <tag> a, em, strong, h1~h6, ul, ol, li (0) | 2018.02.26 |
| HTML5 시멘틱태그 (0) | 2018.02.26 |