a element - by. UXKM

2024-07-30

a element 설명

해당 요소는 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용합니다.
<a> 요소에서 가장 중요한 속성은 바로 링크(link)의 목적지를 가리키는 href(Hyper text REFerence) 속성입니다.
따라서 href 속성이 없다면, target, download, rel, rev, hreflang, type, referrerpolicy 속성들도 사용할 수 없습니다.
링크된 페이지는 보통 브라우저의 현재 윈도우에 표시되며, 이것은 target 속성으로 변경할 수 있습니다.

링크는 모든 브라우저에서 다음과 같은 기본 스타일을 가지게 됩니다.
아직 방문하지 않은 링크(unvisited link) : 밑줄, 파란색(blue)

방문했던 링크(visited link) : 밑줄, 보라색(purple)

활성화된(현재 마우스가 클릭하고 있는) 링크(active link) : 밑줄, 빨간색(red)
HTML5에서 변경된 사항
HTML 4.01에서 <a> 요소는 하이퍼링크(hyperlink)로도, 앵커(anchor)로도 모두 사용할 수 있었습니다.

하지만 HTML5에서는 언제나 하이퍼링크로만 사용되며, href 속성이 없는 경우에는 나중에 추가될지도 모르는 하이퍼링크를 위한 표시(placeholder) 역할만을 할 뿐입니다.

HTML5에서는 해당 요소의 charset, coords, name, rev, shape 속성을 더 이상 지원하지 않습니다.

CSS 기본값 :

								a:link, a:visited {
									color: (internal value);
									text-decoration: underline;
									cursor: auto;
								}
								a:link:active, a:visited:active {
									color: (internal value);
								}

5.1.1. a 속성

[href] <a href="URL 주소">

<a> 요소의 href(Hyper text REFerence) 속성은 링크된 페이지의 URL을 명시합니다. URL은 HTTP 기반 문서 외에서도 쓰입니다. URL은 브라우저가 지원하는 어떠한 프로토콜에도 사용할 수도 있습니다. 예로, 사용자 환경에서는 file, ftp, 그리고 mailto 링크가 많이 사용됩니다.

[rel] <a href="URL 주소" rel="속성값">

<a> 요소의 rel(relationship) 속성은 현재 문서와 링크된 문서 사이의 연관 관계(relationship)를 명시합니다.
여러 검색 엔진들은 링크에 대한 더 많은 정보를 수집하기 위해 이 속성을 사용할 수 있습니다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

alternate
프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄.
author
해당 문서의 저자에 대한 링크를 나타냄.
bookmark
즐겨찾기(bookmarking)에 사용하는 고유 주소(Permanent URL)를 나타냄.
external
링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타냄.
help
도움말 문서에 대한 링크를 나타냄.
license
해당 문서의 저작권 정보에 대한 링크를 나타냄.
next
연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄.
nofollow
유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 되는 것을 나타냄.
noreferrer
사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 되는 것을 나타냄.
noopener
하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안 되는 것을 나타냄.
prev
문서들 중에서 이전 문서를 나타냄.
search
해당 문서를 위한 검색 도구를 나타냄.
tag
현재 문서를 위한 키워드(tag)를 나타냄.

[hreflang] <a href="URL 주소">

								<a href="URL 주소" hreflang="언어 코드[ko(한국어), en(영어), zh(중국어), ja(일본어), fr(프랑스어) 등]"></a>

<a> 요소의 hreflang 속성은 링크된 문서의 언어를 명시하지만, 단순히 참고 용도로만 사용됩니다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

[target] <a target="속성값">

								<a href="URL 주소" target="_blank|_self|_parent|_top"></a>

<a> 요소의 target 속성은 링크한 URL을 어디에 표시할건지 지정합니다. 가능한 값은 브라우징 문맥, 즉 탭, 창, 또는 <iframe>의 이름 또는 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

_blank 속성 값 : URL을 새로운 브라우징 문맥에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
_self 속성 값 : URL을 현재 브라우징 문맥에 표시합니다. 기본값으로 생략이 가능합니다.
_parent 속성 값 : URL을 현재 브라우징 문맥의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
_top 속성 값 : URL을 최상단 브라우징 문맥(현재 문맥의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 문맥)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

[type] <a type="속성값">

								<a href="https://uxkm.github.io" type="text/html">UXKM 사이트로 이동!</a>

<a> 요소의 이 속성은 미디어 유형을 링크 대상에 대한 MIME 유형의 형태로 지정합니다. 일반적으로, 이것은 엄격히 자문 정보를 제공합니다.
브라우저는 멀티미디어 유형에 작은 아이콘을 추가 할 수 있습니다. 예를 들어, 유형이 audio/wav로 설정된 경우 브라우저가 작은 스피커 아이콘을 추가 할 수 있습니다.
MIME 형식의 전체 목록을 보려면 http://www.w3.org/TR/html4/references.html#ref-MIMETYPES 문서를 참조하면 됩니다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

[rev] <a rev="속성값">

								<a href="chapter1.html" rev="toc" rel="next">chapter 1</a>

rev(Reverse links)속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.

[download] <a download="속성값">

								<a download="다운로드되는 파일의 새로운 이름을 명시하며, 생략할 수 있음">다운로드</a>

<a> 요소의 download 속성은 사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시합니다.
이 속성의 속성값은 다운로드되는 파일의 이름이 되며, 그 값에 특별한 제약은 없습니다.
브라우저는 다운로드되는 파일의 정확한 확장자명을 확인하여, 자동으로 파일 이름 끝에 추가합니다. (.html, .pdf, .jpg 등)
만약 download 속성의 속성값을 생략하면, 다운로드되는 파일의 원래 이름이 사용됩니다.
이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다.