“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
<link> 예제 - 외부소스 연결 (예: 스타일시트)
<head>
<link rel="stylesheet">
</head><link> 정의
head 태그 내부에 사용해야 하지만,
각 개별 웹페이지 상단에 넣어 사용할 수도 있음.
2.
HTML5에서 일부 속성 제거 및 추가.
HTML에서는 종료 태그없이 단독 사용하나,
XHTML에서는 반드시 끝에 / 붙여 닫아야 함.
<link> 구문
<link> 속성
| 속성 |
속성값
|
쓰임새 | 비고 |
| rel |
alternate
archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up |
현재 문서와 링크된 문서와의 관계 명시.
필수속성임.
alternate (현재 웹페이지의 대체 문서)
archives (현재 웹페이지의 색인) author (현재 웹페이지의 작가) bookmark (북마크로 사용될 링크) external (외부 링크 표시) first (첫 번째 문서) help (도움이 되는 문서) icon (아이콘 표시) last (마지막 문서) license (면허) next (다음 문서 표시) nofollow (링크를 타고 가선 안됨 표시) noreferrer pingback prefetch (캐쉬 저장 선행 필수 표시) prev (이전 문서 표시) search (검색 표시) sidebar (사이드바 표시) stylesheet(스타일시트 표시) tag up |
|
| type | MIME type |
링크페이지의 MIME type 지정
※ MIME type :
메세지의 종류. (확장자 의미)
(예) type="text/css"
type="image/png"
|
|
| href | URL 주소 |
호출소스 주소
|
|
| charset |
문자셋 정보
|
언어셋 지정
|
HTML5제외 |
| hreflang | 언어 코드 |
호출소스 언어 표시
|
|
| media | 미디어 쿼리 |
호출소스 구동장치 표시
|
|
| rev | 관계 표시 |
호출소스와의 관계 표시
|
HTML5제외 |
| size |
가로x세로
any
|
가로 길이와 세로 길이를 x를 이용해 표시
또는, any 값을 넣을 수도 있음.
|
HTML5추가 |
| target |
_blank(새창이나 새탭에 띄움)
_parent (부모 창에 띄움)
_self (현재 창에 띄움) _top (가장 상단 프레임 창에 띄움) framename (특정 프레임 창에 띄움) |
링크를 어떤 창에 띄울지 결정 | HTML5 제외 |
<link> 예제 - 파비콘(favicon)/아이콘(icon) 등록
<link rel="icon" href="/path/to/favicon.ico">
[속성값]
icon
관련 아이콘 종류 (아래 4가지 값 중 하나 선택 가능)
- icon
- apple-touch-icon
- apple-touch-icon-precomposed
- shortcut icon
- image_src (※ HTML5 경우, 자신이 임의 지정 가능.)
/path/to/favicon.ico
파비콘 이미지 경로
[예제1] - <head>태그 안 에 추가
※ https://homzzang.com 경우
[예제2] - <head> 태그 안에 추가
<link rel="apple-touch-icon" sizes="57x57" href="//homzzang.com/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="//homzzang.com/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="//homzzang.com/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="//homzzang.com/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="//homzzang.com/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="//homzzang.com/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="//homzzang.com/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="//homzzang.com/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="//homzzang.com/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="//homzzang.com/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="//homzzang.com/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="//homzzang.com/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="//homzzang.com/img/favicon/favicon-16x16.png">
PS. https://sir.kr 경우