html <a> 태그 속성 알아보기

html의 <a> 요소 앵커 요소는 href 특성을 통해 URL로 연결할 수 있는 하이퍼 링크를 만들고,

<a> 태그의 href에는 목적지 링크가 있어야합니다.

<a>태그의 속성

1. href

<a href="https://narii.tistory.com/">링크로 이동</a>

href의 value는 URL이다.

주로 이동 할 목적지 URL를 사용한다.

하지만 꼭 http 기반 URL 일 필요는 없고, 브라우저가 지원하는 모든 URL을 사용할 수 있다.

 

현재 페이지에서 링크 이동

<a href="https://narii.tistory.com/">현재창에서 링크 이동</a>

 

새 페이지로 링크 이동

<a href="https://narii.tistory.com/" target="_blank">새창에서 링크 이동</a>

여기에서 사용 된 target은

 

- target : 문서가 열릴 위치를 지정

top과 parent의 차이

<a href="https://narii.tistory.com/" target="_blank">새창에서 열림</a>
<a href="https://narii.tistory.com/" target="_self">현재 탭에서 열림</a>
<a href="https://narii.tistory.com/" target="_parent">부모 탭에서 열림</a>
<a href="https://narii.tistory.com/" target="_top">최상위 탭에서 열림</a>

- tel : 전화걸기

tel을 사용하여 하이픈이 없이 번호를 넣을 수도 있고, 하이픈을 포함 한 번호, 국제 전화번호로도 넣을 수 있습니다.

<a href="tel:01011112222">전화 걸기</a>
<a href="tel:010-1111-2222">하이픈 포함한 번호 전화 걸기</a>
<a href="tel:+국가번호10-1111-2222">국제전화번호 걸기</a>

 

- mailto: 이메일 보내기

제목을 지정하여 메일보내기, 본문을 지정하여 메일보내기,

제목과 본문을 지정하여 메일보내기, 참조인을 설정하여 메일보내기,

숨은 참조인을 설정하여 메일보내기를 할 수도 있습니다.

<a href="mailto:test@test.com">메일보내기</a>
<a href="mailto:test@test.com?subject=제목지정">제목 지정 메일보내기</a>
<a href="mailto:test@test.com?body=본문 지정">본문 지정 메일보내기</a>
<a href="mailto:test@test.com?subject=설문조사&body=[이름]%0D%0A[성별]">제목 본문 메일보내기</a>
<a href="mailto:test@test.com?cc=user@test.com">참조인 포함하여 메일보내기</a>
<a href="mailto:test@test.com?bcc=user@test.com">숨은 참조인 포함하여 메일보내기</a>

 

참고로 cc 와 bcc 의 차이는

cc는 Carbon Copy의 약자로 참조인

bcc는 Blind Carbon Capy의 약자로 숨은 참조인 이라고합니다.

 

(저는 몰랐.........)

 

- sms: 문자 보내기

tel과 마찬가지로 하이픈을 넣은 번호로도 잘 전송이 되는 것을 확인했고,

body 안에 문자 내용을 지정하여 보낼 수도 있었습니다.

<a href="sms:01011112222">문자보내기</a>
<a href="sms:010-1111-2222">하이픈 포함 번호로 문자보내기</a>
<a href="sms:01011112222?body=문자 보내기 테스트입니다."> 내용 포함 문자보내기</a>
<a href="sms:010-1111-2222?body=문자 보내기 테스트입니다.">하이픈 포함, 내용 포함하여 문자보내기</a>

 

- id 값 넣기 : 해당 id 위치로 이동

<a href="#moveSection">해당 id 위치로 이동하기</a>

moveSection이라는 id 위치로 이동한다.

 

- 바로 javascript 연결하기 : href의 자바스크립트를 실행

<a href="javascript:alert('alert 실행');">알림창 띄우기</a>

 

- html 경로 설정하기 : 이동할 html 페이지 경로

<a href="./login.html">로그인</a>

 

2. download : 파일을 다운로드 할 수 있는 속성

download의 value는 filename이다.

이미지 다운 외에도 pdf,xls 등의 파일도 다운로드가 가능하니 사업계획서나 기업 소개서 다운로드 시에도 사용하면 좋겠다.

<a href="./test.png" downloa>이미지 다운로드</a>
<a href="./test.png" download="test-img">이미지 다운로드</a>

그냥 download만 넣으면 경로에 있는 이름대로 test.png 로 저장이 되고,

값을 넣어주면 값을 넣어준 test-img 라는 이름으로 로컬에 저장되는 것을 확인할 수있다.

 

3. hreflang : 링크 된 사이트의 언어 코드를 지정

하지만 테스트 브라우저가 크롬이라 google translate가 먼저 실행이 되어 번역할거냐 어쩔거냐 묻는게 우선순위로 실행 되는 것을 확인함 ㅠㅠ

이 속성은 참고만 해야할 듯!

<a href="https://www.amazon.com/" hreflang="ko">아마존 한국어</a>
<a href="https://www.amazon.com/" hreflang="en">아마존 영어</a>

 

4. type : 링크 된 문서의 인터넷 미디어 타입(MIME type)을 지정

<a href="https://narii.tistory.com/" type="text/html">type 테스트</a>
<a href="example.pdf" type="application/pdf">PDF 다운로드</a>

a 태그의 type 속성은 웹 표준과 관행의 발전으로 덜 중요해졌다.

하지만 예시에서 위의 상황에서는 거의 사용하지 않았고, 아래 상황에 사용하는 예시를 확인할 수 있었다.

5. rel : (relationship) 현재 문서와 링크 된 문서 사이의 연관관계를 명시

출처 : https://www.tcpschool.com/html-tag-attrs/a-rel