HTML

[attribute] HTML - rel 속성 ★ - 링크문서가 현재문서와 어떤 관계인지 지정 (= rel속성 = 릴속성/렐속성)

목차
  1. rel 예제 - <a> 경우
  2. rel 정의
  3. rel 구문
  4. rel 예제 - <area> 경우
  5. rel 예제 - <form> 경우
  6. rel 예제 - <link> 경우

 

rel 예제 - <a> 경우

 

<a rel="nofollow" href="https://homzzang.com/">홈짱닷컴</a>

 

 

rel 정의

 

링크된 문서가 현재 문서와 어떤 관계인지 지정.

 


 

1. rel 속성 사용 가능 태그 종류

<a>, <area>, <form>, <link>

 

2.

  • <a>,<area>,<link> 경우, href 속성 존재 시만 사용 가능.
  • <form> 경우, action 속성 존재 시만 사용 가능.
  • 검색엔진은 rel 속성의 값 사용해 링크문서에 대한 정보 획득.

 

3.

모든 브라우저 지원.

 

 

rel 구문

 

  • <a rel="value">...</a>
  • <area rel="value">
  • <form rel="value">...</form>
  • <link rel="value">

 


[속성값]

 

<a> 태그 rel 속성의 value 종류

  • alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
  • author - 문서 작성자에 대한 링크.
  • bookmark - 북마크에 사용되는 영구 URL 링크.
  • external - 링크문서가 동일 사이트의 일부가 아님 표시.
  • help - 도움말 링크.
  • license - 문서에 대한 라이센스 정보에 대한 링크.
  • next - 시리즈 문서의 다음 문서 링크.
  • nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
  • noopener ★ - 오프너 표시 X (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 없어야 함 표시.)
  • noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
  • prev - 시리즈 문서 섹션의 '이전' 문서 링크.
  • search - 문서의 검색 도구에 대한 링크
  • tag - 현재 문서의 태그(키워드)

 

<area> 태그 rel 속성의 value 종류

  • alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
  • author - 문서 작성자에 대한 링크.
  • bookmark - 북마크에 사용되는 영구 URL 링크.
  • help - 도움말 링크.
  • license - 문서에 대한 라이센스 정보에 대한 링크.
  • next - 시리즈 문서의 다음 문서 링크.
  • nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
  • noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
  • prefetch - 타겟 문서를 캐시해야 하는지 지정.
  • prev - 시리즈 문서 섹션의 '이전' 문서 링크.
  • search - 문서의 검색 도구에 대한 링크
  • tag - 현재 문서의 태그(키워드)

 

<form> 태그 rel 속성의 value 종류

  • alternate - 문서의 대체 표현 링크.( 예: 인쇄 페이지, '번역/미러'문서)
  • help - 도움말 링크.
  • license - 문서에 대한 라이센스 정보에 대한 링크.
  • next - 시리즈 문서의 다음 문서 링크.
  • nofollow ★ - 유료 링크와 같이 승인되지 않은 문서에 대한 링크.("nofollow"는 Google 검색 스파이더가 해당 링크를 따라가지 않도록 지정하기 위해 Google에서 사용)
  • noopener ★ - 오프너 표시 X (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 없어야 함 표시. 해킹방지에 유용.)
  • noreferrer ★ - 리퍼러 표시 X (즉, 리퍼러를 알 수 없게 만듦. 사용자가 하이퍼링크를 클릭하면 참조 헤더가 포함되지 않음.)
  • opener - 오프너 표시 O (즉, 하이퍼링크를 따라 생성된 브라우징 컨텍스트에 오프너 브라우징 컨텍스트가 있어야 함 표시.)
  • prev - 시리즈 문서 섹션의 '이전' 문서 링크.
  • search - 문서의 검색 도구에 대한 링크


<link> 태그 rel 속성의 value 종류

  • alternate - 문서의 대체 버전에 대한 링크. (예: 인쇄 페이지, 번역/미러 문서). (예) <link rel="alternate" type="application/atom+xml" title="Homzzang News" href="/page/news/atom">
  • autor - 문서 작성자에 대한 링크.
  • dns-prefetch - 브라우저가 대상 리소스의 원본에 대해 DNS 확인을 선제적으로 수행하도록 지정.
  • help - 도움말 문서에 대한 링크. (예) <link rel="help" href="/help/">
  • icon ★ - 문서를 나타내는 아이콘 가져오기. (예) 파비콘: <link rel="icon" href="favicon.ico" type="image/x-icon">
  • license - 문서의 저작권 정보에 대한 링크.
  • next - 시리즈의 다음 문서에 대한 링크.
  • pingback - 현재 문서에 대한 핑백(= 블로그나 웹사이트에서 다른 사이트의 글에 대한 알림 메시지)을 처리하는 핑백 서버의 주소 제공.
  • preconnect - 브라우저가 대상 자원의 원천(origin)에 선제적으로 연결하도록 지정.
  • prefetch - 후속 탐색에 필요할 가능성이 있으므로 브라우저가 대상 리소스를 선제적으로 가져와 캐시하도록 지정.
  • preload - 브라우저 에이전트가 "as" 속성으로 지정된 대상(및 해당 대상과 연관된 우선 순위)에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시해야 함을 지정.
  • prerender - 브라우저가 백그라운드에서 지정된 웹 페이지를 사전 렌더링(로드)하도록 지정. 따라서 사용자가 이 페이지로 이동하면 페이지 로드 속도가 빨라짐 (∵ 페이지가 이미 로드되었기 때문). 경고! 이것은 사용자의 대역폭을 낭비함! 사용자 여정의 특정 시점에서 웹페이지가 필요하다고 절대적으로 확신하는 경우에만 사전 렌더링 사용 권장.
  • prev - 시리즈 문서의 이전 문서 링크.
  • search - 현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크.
  • stylesheet ★ - CSS 외부스타일시트.

  

 

rel 예제 - <area> 경우

 

<p>HTML 언어 자세히 보려면 링크 클릭:</p>

 

<img src="langs.gif" width="200" height="100" alt="홈짱" usemap="#langmap">

 

<map name="langmap">

  <area shape="rect" coords="0,0,100,50" alt="HTML" href="https://homzzang.com/b/html" rel="alternate">

</map> 

 

 

rel 예제 - <form> 경우

 

<form action="action_page.php" method="post" rel="noopener">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br>

  <label for="email">이메일:</label>

  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">

</form>

 

 

rel 예제 - <link> 경우

 

스타일시트:

<link rel="stylesheet" href="style.css">

 

파비콘:

<link rel="shortcut icon" href="favicon.ico">

 



분류 제목
attribute HTML - onafterprint 속성 - 인쇄 대화상자 닫힌 이후 이벤트 발생 시 실행할 코드 정의 (=…
attribute HTML - onbeforeprint 속성 - 인쇄 대화상자 나타나기 이전 이벤트 발생 시 실행할 코드 정의…
attribute HTML - onbeforeunload 속성 - 사용자가 웹페이지 떠날 때 떠나기 전 실행 (= onbefo…
attribute HTML - onblur 속성 ★ - 포커스 해제 이벤트 시 실행 (= onblur속성 = 온블러속성) ※ …
attribute HTML - oncanplay 속성 - 재생 시작 가능 시 실행 (= oncanplay속성 = 온캔플레이속성…
attribute HTML - oncanplaythrough 속성 - 버퍼링 위해 멈춤 없이 전체 재생 가능 시 실행 (= o…
attribute HTML - onchange 속성 ★ - 요소값 변경 이벤트 시 실행 (= onchange속성 = 온체인지속…
attribute HTML - onclick 속성 ★ - 요소 클릭 이벤트 시 실행 (= onclick속성 = 온클릭속성) ※…
attribute HTML - oncontextmenu 속성 - 마우스오른쪽메뉴선택 시 실행 (= oncontextmenu속성…
attribute HTML - oncopy 속성 - 요소의 텍스트나 이미지 태그를 복사 시 실행 (=oncopy속성 = 온카피…
attribute HTML - oncuechange 속성 - 트랙의 큐(캡션/자막) 변경 시 실행 (= oncuechange속…
attribute HTML - oncut 속성 - 요소 내용 잘라내기 시 실행 (= oncut속성 = 온컷속성) ※ oncut…
attribute HTML - ondblclick 속성 ★ - 요소 더블클릭 이벤트 시 실행 (= ondblclick속성 = …
attribute HTML - ondrag 속성 - 드래그 이벤트 시 실행할 코드 지정 (= ondrag속성 = 온드래그속성)…
attribute HTML - ondragend 속성 - 드래그 종료 시 실행 (= ondragend속성 = 온드래그엔드속성)…
15/24
목록
 홈  PC버전 로그인 일본어
그누앞단언어 30
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인