[HTML] <a>

<a> : 링크 정의 태그

---

<a>는 링크를 정의하는 태그입니다.

a태그와 같이쓰이는 href속성을 통해

• 다른 페이지
• 같은 페이지의 어느 위치
• 파일
• 이메일 주소
• 그 외 다른 URL로 연결

할 수 있는 하이퍼링크를 만듭니다.

 

 

a태그 속성

---

download

하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시

이 속성은 반드시 href속성이 설정되어 있어야만 사용할 수 있다.

• 속성값 : 파일이름
  • 설명 : 다운로드되는 파일의 새로운 이름을 명시하며, 생략할 수 있음.

<a href="/examples/images/tcpschool_logo.png" download>
    <img src="/examples/images/tcpschool_logo.png" alt="tcpschool" width="196" height="26">
</a>

 

href 속성

링크의 URL을 명시한다.

1. 절대주소

<a href="https://www.naver.com">네이버</a>

2. 상대주소

<a href=“/lecture/logo.png”>상대 주소</a>

3. 같은 페이지 내에서 명시된 id를 가지고 있는 요소를 연결함.

<!-- <a> 요소로 아래의 구획에 연결 -->
<a href="#test">아래 제목으로 건너뛰기</a>

<!-- 링크가 향할 제목 -->
<h2 id="test">아래의 제목</h2>

4. 스크립트

<a href=“javascript:alert(‘반갑습니다!’)”>스크립트</a>

하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL을 사용할 수 있습니다.

• 페이지 구획을 가리키는 프래그먼트 URL
• 미디어 파일 일부를 가리키는 미디어 리소스
• tel: URL을 사용하는 전화번호
• mailto: URL을 사용하는 이메일 주소

 

5. 이메일 주소 연결

<a href="test@test.com">Send email to 이메일</a>

메일링크(mailto:)는 HTML 내에 클릭하면 메일을 보내는 기능을 갖게 하는 방법으로 <a> 앵커 태그에 내장해, 메일 소프트를 호출할 수 있도록 해줍니다.

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

링크를 클릭하면 메일 보내기가 실행되고 메일 받는이인 "to:"에 "test@test.com"가 들어간 메일 신규 작성 화면이 열립니다.

 

cc(참조)미리 넣어주기

<a href="mailto:test@test.com?cc=test1@test.com">메일보내기</a>

 

bcc(숨은 참조)미리 넣어주기

<a href="mailto:test@test.com?bcc=test2@test.com">메일보내기</a>

 

내용 본문 미리 넣어주기

<a href="mailto:superman@test.com?bcc=superman@test.com">메일보내기</a>

 

복수항목 같이 넣어주기

<a href="mailto:test@test.com?subject=설문조사&body=[이름]%0D%0A[성별]">메일보내기</a>

 

전화번호로 연결

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

 

 

hreflang 속성

문서의 언어를 명시하지만, 단순히 참고 용도로만 사용됩니다.

• 알파벳 두 문자로 이루어진 언어 코드
  • ko(한국어), en(영어), zh(중국어), ja(일본어), fr(프랑스어) 등

<a href="https://www.amazon.com/" hreflang="en">아마존</a>

 

ping 속성

사용자가 하이퍼링크를 클릭할 떄 브라우저가 보내는 짧은 HTTP POST 요청(request)을 전달받을 URL의 리스트를 명시

이 속성은 모니터링(monitoring)이나 트래킹(tracking)에 유용하게 사용됩니다.

• 속성값 : URL
• 사용자가 하이퍼링크를 클릭할 때 브라우저가 보내는 짧은 HTTP POST 요청(request)을 전달받을 URL의 리스트를 명시함.
• 하나 이상의 유효한 URL이 띄어쓰기(space)를 사용하여 구분되어야 함.

<a href="http://www.tcpschool.com" ping="http://www.tcpschool.com/monitoring">

사파리에서 지원 안함

 

ref 속성

현재 문서와 링크된 문서 사이의 연관 관계를 명시합니다.

여러 검색 앤진들은 링크에 대한 더 많은 정보를 수집하기 위해 이 속성을 사용할 수 있습니다.

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

<a href="http://www.tcpschool.com/bbs/login.php" rel="nofollow">로그인 화면</a>

 

target 속성

링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시

<a href="http://www.tcpschool.com" target="_blank">티씨피스쿨 사이트로 이동!</a>

 

type 속성

MIME타입이라고도 알려져 있는 링크된 문서의 인터넷 미디어 타입을 명시

이 속성은 반드시 href속성이 설정되어야만 사용할 수 있다.

• 속성값 : 미디어 타입
  • 링크된 문서의 인터넷 미디어 타입

<a href="http://www.tcpschool.com" type="text/html">티씨피스쿨 사이트로 이동!</a>

 

 

참고자료

---

MDN

TCPSCHOOL

https://m.blog.naver.com/tokyomari/221912264344