a element - by. UXKM

2025-05-16

요약 설명
<a> 요소는 하이퍼링크(anchor)를 정의하는 시맨틱 태그로, 다른 웹페이지, 같은 문서 내의 위치, 이메일 주소, 파일 등으로 사용자를 연결하는 링크를 만듭니다.
href 속성을 통해 이동할 목적지를 지정하며, 텍스트 또는 이미지 등 다양한 콘텐츠에 링크를 적용할 수 있습니다. 외부 링크, 내부 링크, 페이지 내 앵커 등 다양한 형태로 활용되며, target, rel, download 같은 속성으로 동작 방식을 제어할 수 있습니다.

<a> 요소는 웹 문서에서 기본적인 탐색 기능을 제공하는 가장 중요한 내비게이션 도구 중 하나입니다.

주요 역할 및 특징

하이퍼링크 생성
- href 속성을 사용해 연결하려는 URL이나 링크 대상을 지정합니다.
- 링크는 텍스트, 이미지, 또는 기타 콘텐츠로 표현할 수 있습니다.
다양한 링크 대상
- 외부 링크 : 다른 웹사이트로 연결.
- 내부 링크 : 같은 웹사이트 내 다른 페이지나 특정 섹션으로 연결.
- 파일 다운로드 : 파일을 다운로드하도록 설정.
- 특수 프로토콜 : 이메일(mailto:), 전화번호(tel:) 등.
의미론적 역할
<a> 요소는 기본적으로 내비게이션 목적을 가지며, 사용자는 링크를 통해 추가 정보를 탐색할 수 있습니다.
글로벌 접근성
스크린 리더 사용자에게 링크의 목적을 명확히 전달하기 위해 의미 있는 텍스트를 포함해야 합니다.

CSS 기본 값

<a> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							a {
								display: inline;
								text-decoration: underline;  /* href 속성이 적용된 링크 */
								color: blue;                 /* 기본 상태 */
								color: purple;               /* 방문한 링크 */
								color: red;                  /* 활성화된 링크 */
							}

기본 문법

							<a href="https://example.com">링크 텍스트</a>

속성

[href] 필수 <a href="링크 주소">

href 속성은 <a> 요소의 핵심(필수) 속성으로, 링크할 URL이나 같은 문서 내의 앵커 대상을 지정합니다. href가 없는 <a> 요소는 링크로 동작하지 않습니다.

								<a href="https://example.com">외부 링크</a>
								<a href="#section1">내부 링크</a>
								<a href="mailto:example@example.com">이메일 링크</a>
								<a href="tel:01012345678">전화 걸기 링크</a>

[target] 선택 사항 <a href="링크 주소" target="값">

target 속성은 링크를 클릭했을 때, 링크 대상이 열리는 위치를 지정하는 속성으로, 기본값은 현재 창(_self)입니다.

[target="_self"]

(기본값/생략 가능) 링크가 클릭된 현재 창이나 프레임에서 열리도록 설정합니다.

									<a href="https://example.com" target="_self">현재 창에서 열기(생략 가능)</a>

[target="_blank"]

링크를 새 창이나 새 탭에서 열리도록 설정합니다.

									<a href="https://example.com" target="_blank">새 창에서 열기</a>

[target="_parent"]

링크가 <iframe> 내부에 있을 경우, 현재 <iframe>을 포함하는 부모 프레임에서 링크를 열도록 설정합니다. <iframe>이 없을 경우 _self와 동일하게 작동합니다.

									<a href="https://example.com" target="_parent">부모 프레임에서 열기</a>

[target="_top"]

<iframe>이나 중첩된 <iframe> 구조에서 링크를 클릭했을 때, 부모 프레임이나 조상 프레임이 아닌 최상위 브라우저 창(즉, 전체 창)에서 링크를 엽니다.

									<a href="https://example.com" target="_top">최상위 프레임에서 열기</a>

[rel] 선택 사항 <a href="링크 주소" rel="속성값">

<a> 요소의 rel 속성은 링크와 링크 대상 간의 관계를 명시하는 데 사용됩니다. rel 속성은 SEO, 보안, 접근성 등을 고려한 링크의 동작을 제어하는 데 중요한 역할을 합니다.

[rel] 속성 요약

rel 값
의미

alternate

대체 버전 (예: RSS 피드)
author

작성자 정보
bookmark

북마크 가능 URL
external

외부 리소스
help

도움말 페이지
license

라이선스 정보
next

다음 페이지
prev

이전 페이지
nofollow

검색 엔진에 따라가지 말라는 지침
noopener

새 창에서 부모 페이지 조작 방지
noreferrer

HTTP 참조 정보 전달 방지
prefetch

리소스를 미리 로드하여 성능 최적화
search

검색 기능 제공 리소스
tag

관련 태그
ugc

사용자 생성 콘텐츠 (댓글 등)

[rel="alternate"]

현재 문서의 대체 버전을 제공하는 링크임을 나타냅니다. 주로 RSS 피드나 다른 언어 버전을 링크할 때 사용합니다.

									<a href="https://example.com/rss" rel="alternate">Subscribe to our RSS feed</a>

[rel="author"]

링크 대상이 현재 문서의 작성자(저자) 정보임을 나타냅니다.

									<a href="https://example.com/author" rel="author">About the Author</a>

[rel="bookmark"]

링크가 북마크 가능하거나 중요한 문서의 URL을 나타냅니다.

									<a href="https://example.com/important" rel="bookmark">Bookmark page</a>

[rel="external"]

링크 대상이 외부 리소스임을 나타냅니다.

									<a href="https://external-site.com" rel="external">Visit External Site</a>

[rel="help"]

링크가 도움말이나 추가적인 지원 정보를 제공함을 나타냅니다.

									<a href="https://example.com/help" rel="help">Help Center</a>

[rel="license"]

링크 대상이 현재 문서의 라이선스 정보를 제공함을 나타냅니다.

									<a href="https://example.com/license" rel="license">View License</a>

[rel="next"]

링크 대상이 현재 문서의 다음 페이지임을 나타냅니다.

									<a href="https://example.com/page2" rel="next">Next Page</a>

[rel="prev"]

링크 대상이 현재 문서의 이전 페이지임을 나타냅니다.

									<a href="https://example.com/page1" rel="prev">Previous Page</a>

[rel="nofollow"]

검색 엔진이 이 링크를 따라가지 않도록 지시합니다. 주로 광고 링크에 사용됩니다.

									<a href="https://sponsored-link.com" rel="nofollow">Sponsored Link</a>

[rel="noopener"]

새 창/탭에서 링크를 열 때, 링크된 페이지가 원본 페이지를 제어하지 못하도록 합니다.

									<a href="https://example.com" target="_blank" rel="noopener">Open Safely</a>

[rel="noreferrer"]

링크를 따라갈 때, HTTP 참조 정보를 전달하지 않도록 설정합니다.

									<a href="https://example.com" target="_blank" rel="noreferrer">No Referrer</a>

[rel="prefetch"]

브라우저에 링크된 리소스를 미리 로드하도록 지시하여 성능을 최적화합니다.

									<a href="https://example.com/next-page" rel="prefetch">Prefetch Next Page</a>

[rel="search"]

링크 대상이 검색 기능을 제공하는 리소스임을 나타냅니다.

									<a href="search.html" rel="search">Search Page</a>

[rel="tag"]

링크 대상이 현재 문서와 관련된 태그를 나타냅니다.

									<a href="tags/javascript" rel="tag">JavaScript Tag</a>

[rel="ugc"]

링크 대상이 사용자 생성 콘텐츠(User Generated Content)에 의해 생성되었음을 나타냅니다. 주로 댓글 링크 등에 사용됩니다.

									<a href="https://example.com" rel="ugc">User Generated Content</a>

[download] 선택 사항 <a href="링크 주소" download>

링크를 클릭하면 지정된 파일을 다운로드하도록 설정합니다.

								<a href="file.pdf" download>PDF 다운로드</a>

[type] 선택 사항 <a href="링크 주소" type="MIME 유형">

링크 대상의 MIME 타입(Media Type)을 명시하는 데 사용됩니다. 이 속성을 통해 브라우저나 사용자 에이전트가 링크를 처리하기 전에 대상 리소스의 유형을 예상할 수 있습니다.
(MIME 타입이란? [Multipurpose Internet Mail Extensions type]의 약어로 파일의 형식과 내용을 나타내는 표준 방식으로, 브라우저나 서버가 특정 데이터를 어떻게 해석하고 처리해야 하는지를 결정하는 데 사용됩니다.)

[type] 속성 요약

type 값
의미

text/html

html 문서 링크
html 문서

JSON 데이터 링크
application/pdf

PDF 파일 링크
text/plain

Plain Text 링크
image/png

PNG 이미지 링크
image/jpeg

JPEG 이미지 링크
image/gif

GIF 이미지 링크
image/svg+xml

SVG 이미지 링크
audio/mpeg

Audio 파일 링크
video/mp4

Video 파일 링크
application/xml

XML 파일 링크
application/msword

Microsoft Word 파일 링크
application/zip

ZIP 파일 링크
application/vnd.ms-excel

Excel 파일 링크
application/vnd.ms-powerpoint

PowerPoint 파일 링크

[type="text/html"] (html 문서)

HTML 페이지를 링크할 때 사용합니다.

										<a href="https://example.com" type="text/html">Visit HTML Page</a>

[type="application/json"] (JSON 데이터)

JSON 데이터를 제공하는 파일을 링크할 때 사용합니다.

										<a href="data.json" type="application/json">View JSON Data</a>

[type="application/pdf"] (PDF 파일)

PDF 파일을 링크할 때 사용합니다.

										<a href="document.pdf" type="application/pdf">Download PDF</a>

[type="text/plain"] (Plain Text)

일반 텍스트 파일을 링크할 때 사용합니다.

										<a href="textfile.txt" type="text/plain">Download Plain Text</a>

[type="image/png"] (PNG 이미지)

PNG 이미지를 링크할 때 사용합니다.

										<a href="image.png" type="image/png">Download PNG Image</a>

[type="image/jpeg"] (JPEG 이미지)

JPEG 이미지를 링크할 때 사용합니다.

										<a href="image.jpg" type="image/jpeg">View JPEG Image</a>

[type="image/gif"] (GIF 이미지)

GIF 이미지를 링크할 때 사용합니다.

										<a href="image.gif" type="image/gif">View GIF Image</a>

[type="image/svg+xml"] (SVG 이미지)

SVG 이미지를 링크할 때 사용합니다.

										<a href="image.svg" type="image/svg+xml">View SVG Image</a>

[type="audio/mpeg"] (Audio 파일)

MP3 오디오 파일을 링크할 때 사용합니다.

										<a href="audio.mp3" type="audio/mpeg">Listen to Audio</a>

[type="video/mp4"] (Video 파일)

MP4 비디오 파일을 링크할 때 사용합니다.

										<a href="video.mp4" type="video/mp4">Watch Video</a>

[type="application/xml"] (XML 파일)

XML 데이터를 제공하는 파일을 링크할 때 사용합니다.

										<a href="data.xml" type="application/xml">View XML Data</a>

[type="application/msword"] (Microsoft Word 파일)

Microsoft Word 문서를 링크할 때 사용합니다.

										<a href="document.doc" type="application/msword">Download Word Document</a>

[type="application/zip"] (ZIP 파일)

ZIP 파일을 링크할 때 사용합니다.

										<a href="spreadsheet.xls" type="application/vnd.ms-excel">Download Excel Spreadsheet</a>

[type="application/vnd.ms-excel"] (Excel 파일)

Excel 문서를 링크할 때 사용합니다.

										<a href="spreadsheet.xls" type="application/vnd.ms-excel">Download Excel Spreadsheet</a>

[type="application/vnd.ms-powerpoint"] (PowerPoint 파일)

PowerPoint 프레젠테이션 파일을 링크할 때 사용합니다.

										<a href="presentation.ppt" type="application/vnd.ms-powerpoint">Download PowerPoint Presentation</a>

[hreflang] 선택 사항 <a href="링크 주소" hreflang="언어 코드">

링크된 리소스의 언어 및 지역 정보를 검색 엔진이나 사용자 에이전트에 전달하기 위해 사용됩니다. 주로 다국어 또는 다지역 웹사이트에서 특정 언어 및 지역에 맞는 콘텐츠를 제공하기 위해 사용됩니다.

기본 사용

ISO 639-1 표준에 따른 언어 코드만 사용하는 형식입니다.

										<a href="https://example.com/fr" hreflang="en">English</a>

언어와 지역 지정

ISO 639-1 표준에 따른 언어 코드와 ISO 3166-1 표준에 따른 국가 코드를 같이 사용하는 형식입니다.

										<a href="https://example.com/en-us" hreflang="en-us">English (US)</a>      <!-- 영어(미국) 페이지 -->
										<a href="https://example.com/en-gb" hreflang="en-gb">English (UK)</a>      <!-- 영어(영국) 페이지 -->
										<a href="https://example.com/fr-fr" hreflang="fr-fr">Français (France)</a> <!-- 프랑스어(프랑스) 페이지 -->
										<a href="https://example.com/ja-jp" hreflang="ja-jp">日本語 (日本)</a>      <!-- 일본어(일본) 페이지 -->

x-default 사용

언어 또는 지역에 구애받지 않는 기본 페이지를 나타냅니다. 주로 지역 선택 페이지나 글로벌 페이지에 사용됩니다.

										<a href="https://example.com/" hreflang="x-default">Default Version</a>

언어 코드 (ISO 639-1)

다양한 언어를 나타내기 위한 표준 코드입니다. 언어 코드는 2자리 문자로 구성됩니다.

언어
코드
언어
코드

영어

en

한국어

ko
스페인어

es

일본어

ja
프랑스어

fr

독일어

de
중국어(간체)

zh

중국어(번체)

zh-tw
이탈리아어

it

아랍어

ar
러시아어

ru

힌디어

hi
포르투갈어

pt

태국어

th
네덜란드어

nl

베트남어

vi
폴란드어

pl

헝가리어

hu
스웨덴어

sv

체코어

cs
노르웨이어

no

터키어

tr
덴마크어

da

우크라이나어

uk

국가 코드 (ISO 3166-1)

국가나 지역을 나타내는 표준 코드입니다. 국가 코드는 2자리 문자로 구성됩니다.

국가
코드
국가
코드

미국

us

대한민국

kr
영국

gb

일본

jp
캐나다

ca

중국

cn
독일

de

대만

tw
프랑스

fr

홍콩

hk
스페인

es

베트남

vn
이탈리아

it

태국

th
브라질

br

필리핀

ph
러시아

ru

인도

in
호주

au

말레이시아

my
뉴질랜드

nz

인도네시아

id
네덜란드

nl

아랍에미리트

ae
스웨덴

se

이집트

eg

언어 코드와 국가 코드 조합 예시

언어 코드와 국가 코드를 조합하여 특정 언어와 지역을 지정할 수 있습니다.

언어와 지역
코드
언어와 지역
코드

영어(미국)

en-us

영어(영국)

en-gb
스페인어(스페인)

es-es

스페인어(멕시코)

es-mx
프랑스어(프랑스)

fr-fr

프랑스어(캐나다)

fr-ca
중국어(간체)

zh-cn

중국어(번체, 대만)

zh-tw
한국어

ko-kr

아랍어(사우디아라비아)

ar-sa
포르투갈어(브라질)

pt-br

포르투갈어(포르투갈)

pt-pt

예제

외부 웹사이트로 연결

새 창(탭)으로 링크 열기

내부 문서의 특정 위치로 이동

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

파일 다운로드

전화번호와 이메일 링크

주의사항

href 속성이 없는 <a> 요소는 링크로 동작하지 않으며, 클릭 시 아무런 동작을 하지 않습니다.
항상 링크가 유효한지 확인하고, 잘못된 URL을 제공하지 않도록 주의해야 합니다.
외부 링크 사용 시 target="_blank"를 사용할 경우, 보안을 위해 rel="noopener noreferrer"를 함께 사용하는 것이 권장됩니다.
링크 텍스트는 "여기를 클릭"과 같은 모호한 텍스트는 피해야 하며, 링크 목적을 명확히 표현하는 것이 좋습니다.
<a href="uxkm.io">여기 클릭</a>  <a href="uxkm.io">UXKM 바로가기</a>