Javascript - a 태그 알아보기

 

자바스크립트에서는 a(anchor) 태그를 이용하여 페이지 이동 외에도 파일 다운로드 링크나 메일 링크 등 다양한 기능을 만들 수 있다.

 

a 태그의 속성에 대해 간단히 알아보자.

 

 

---

 

href

링크가 가리키는 URL로, HTTP 스킴 뿐만 아니라 브라우저가 지원하는 모든 URL 스킴의 사용이 가능하다.

 

또한, 페이지의 어느 한 요소로 이동할 수 있는 프래그먼트의 사용도 가능하다.

 

주로 사용되는 케이스는 아래와 같다.

 

 

URL로 이동

// 1. 절대 경로로 이동
<a href="/path/to/go">이동</a>

// 2. 상대 경로로 이동
<a href="../shift">이동</a>

// 3. 다른 origin으로 이동
<a href="http://www.naver.com">이동</a>

// 4. 동일한 scheme일 경우 생략 가능
<a href="//www.naver.com">이동</a>

절대 경로 URL로 이동하는 경우에는 origin을 생략하고 이동하려는 경로만 작성하면 된다.

 

상대 경로 이동은 /(슬래쉬) 앞에 ., ..를 붙여서 표현할 수 있다.

 

동일 스키마 URL로 이동하는 경우에는 스키마를 생략해도 된다.

 

다른 origin의 URL로 이동하는 것도 가능하다.

 

 

사용자 기기에서 전화 걸기

<a href="tel:01011228877">전화 걸기</a>

tel: 스킴은 사용자의 기기에 따라 다르게 동작한다.

 

사용자가 스마트폰을 이용하여 접근하는 경우에는 전화 앱을 열고 자동으로 번호를 입력한다.

 

 

사용자 기기에서 메일 보내기

<a href="mailto:wastfg6972@naver.com">메일 보내기</a>

mailto: 스킴은 사용자 기기에 설치된 어플리케이션을 통해 지정한 메일 주소로 메일을 보낼 때 사용할 수 있다.

 

 

자바스크립트 실행

<script>
  const showAlert = (name) => alert(`hello, ${name}!`);
</script>

<a href="javascript:showAlert('mjkim')">함수 실행</a>
<a href="javascript:const a = 2; alert(`The value is ${a}.`);">자바스크립트 코드 실행</a>

javascript: 스킴을 사용하면 미리 선언한 함수를 호출하거나 자바스크립트 코드를 실행할 수 있다.

 

자바스크립트 코드는 세미콜론(;)을 구분자로 사용하여 여러 줄을 실행할 수도 있다.

 

 

페이지의 특정 ID를 갖는 요소로 이동(= 프래그먼트)

<a href="#Section_further_down">아래 제목으로 이동</a>
<a href="#">맨 위로 이동</a>

<h2 id="Section_further_down">아래 제목</h2>

페이지 요소 중에서 특정 id를 갖는 경우, id 앞에 # 키워드를 붙여 href에 넘겨주면 해당 요소의 위치로 이동할 수 있다.

 

href에 id를 지정하지 않고 #만 넘겨주는 경우에는 페이지의 최상단으로 이동한다.

 

 

download

<a href="../~~" download="your_file.txt">현재 origin 경로의 파일 다운로드</a>

download 속성은 a 태그를 클릭했을 때, 해당 파일을 다운로드할 수 있게 해주는 속성이다.

 

download 속성에 지정한 값이 다운로드될 파일의 이름이 되고, 확장자는 생략해도 된다.

 

물론 download 속성의 값도 생략이 가능하며, 이런 경우에는 원본 파일의 이름으로 다운로드된다.

 

href 속성에는 제공할 파일의 경로를 명시한다.

 

다운로드 속성은 same-origin URL 혹은 blob:, data: 스킴에서만 동작한다.

 

 

hreflang

<a href="https://www.w3schools.com" hreflang="en">W3Schools</a>

href에 제공한 URL의 언어(language)에 대한 힌트를 제공하는 속성이다.

 

반드시 href 속성을 지정해야 사용할 수 있으며, 특별한 기능으로 동작하지는 않는다.

 

사용할 수 있는 lang 값은 html의 lang 속성에서 사용되는 ko(한국어), en(영어), zh(중국어), ja(일본어), fr(프랑스어) 등이 있다.

 

 

type

<a href="https://github.com/sap03110" type="text/html">github로 이동</a>

href에 제공한 URL의 MIME type(미디어 타입)에 대한 힌트를 제공하는 속성이다.

 

hreflang과 마찬가지로 특별한 기능은 없으며, 반드시 href 속성을 지정해야 사용할 수 있다.

 

 

ping

<a href="http://www.your-domain.com/join" ping="http://www.your-domain.com/logging http://www.your-domain.com/monitoring">회원가입</a>

URL 리스트를 전달하면 a 태그를 클릭할 때마다 브라우저에서 해당 URL 목록에 POST 요청을 전송한다.

 

URL은 공백( )으로 구분하며, 주로 추적 및 로깅 용도로 사용할 수 있다.

 

 

target

링크한 URL을 표시할 위치에 대한 값으로, 아래 4개 중 하나의 값을 설정할 수 있다.

 

_self (기본값)

- 현재 브라우저에 URL 표시

 

_blank

- 새로운 탭에 URL 표시(브라우저 설정에 따라 새 창이 될 수도 있음)

 

_parent

- 현재 컨텍스트의 부모 컨텍스트(창 or 탭)에 URL 표시

- 부모가 존재하지 않을 경우에는 _self와 동일하게 동작

 

_top

- 최상단 브라우징 컨텍스트에 URL 표시

- 부모가 존재하지 않을 경우에는 _self와 동일하게 동작

 

 

referrerpolicy

이동할 URL의 referrer를 지정할 수 있는 속성이다.

 

사용 가능한 값은 다음과 같으며, 여러 개의 값을 지정할 경우에는 | 기호로 구분한다.

속성	설명
no-referrer	referrer 정보를 보내지 않음
no-referrer-when-downgrade (기본값)	더 낮은 프로토콜 보안 레벨로 이동하는 것이 아닌 경우에만 origin + path + 쿼리 스트링을 보냄
origin	현재 페이지의 origin(scheme + host +port)을 보냄
origin-when-cross-origin	same-origin 요청일 때는 origin + path + 쿼리 스트링, cross-origin 요청일 때는 origin를 보냄
same-origin	same-origin 요청일 때만 referrer를 보냄 (cross-origin 요청일 때는 X)
strict-origin-when-cross-origin	프로토콜 보안 레벨이 같거나 더 높을 경우(http, https)에만 origin을 보냄
unsafe-url	현재 페이지의 origin + path + 쿼리 스트링을 보냄 (안전하지 않으니 조심해서 사용해야 함)

 

 

rel

현재 페이지와 링크된 URL의 연관 관계에 대한 힌트를 제공하는 속성이다.

 

hreflang과 마찬가지로 특별한 기능은 없지만, SEO에 활용된다.

 

rel 속성에서 사용할 수 있는 값으로는 다음과 같다.

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

 

최신 브라우저에서는 target="_blank" 속성을 지정하면 rel="noopener"를 적용한 것과 동일하게 동작한다.

 

 

 

참고 자료

<a> - HTML: Hypertext Markup Language | MDN