목차
<link> 예제 - 외부소스 연결 (예: 스타일시트) <link> 정의 <link> 구문 <link> 속성 <link> 예제 - 파비콘(favicon)/아이콘(icon) 등록
<link> 예제 - 외부소스 연결 (예: 스타일시트)
<head> <link rel="stylesheet" href="https://homzzang.com/css/style.css?ver=20190929" type="text/css" >
</head>
<link> 정의
1.
HTML5에서 일부 속성 제거 및 추가.
3.
4. 구글 웹마스터 Favicon (파비콘) 가이드라인
<link> 구문
<link 속성="속성값">
cf. 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가지 값 중 하나 선택 가능)
/path/to/favicon.ico
파비콘 이미지 경로
[예제1] - <head>태그 안 에 추가
<link rel="shortcut icon" href="https://homzzang.com/data/seo/favicon.ico">
<link rel="apple-touch-icon" href="https://homzzang.com/data/seo/phone_icon.png">
<link rel="image_src" href="https://homzzang.com/data/seo/sns_image.png">
※ 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 경우
PS. 루트폴더에 파비콘 넣으면 자동 인식됨. (예) https://homzzang.com/favicon.ico
최신댓글