Footer에 html 전화걸기, 메일보내기 a href

 

[html / css] a 태그

 

 footer에 나의 정보를 담고 싶어서 처음에는 단순히 이름, 전화번호, 메일주소를 기본으로 적고
링크에 나의 깃허브와 티스토리를 연결만 해놓을 생각이였다.

그러다 요즘 핸드폰에서 작업하는 경우가 많아 a 태그에 핸드폰번호와 이메일도 이동되도록 하는 경우가 많아
같이 적용을 해볼까 합니다.

 

---

<a> 태그란

<a> 태그는 href 특성을 통해 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그외 다른 url로 연결할 수 있는
하이퍼링크를 만드는 기능을 가진 태그이다.

 

- href 속성

1. <a> 태그 클릭시 이동하는 URL

 

<a href="www.google.com">Google</a>

 

2. 페이지 내부 영역을 가르키는 fragment URL

<a href="#section_second">두번째 단락으로 가기</a>

<h2 id="section_second">두번째 단락</h2>

 

3. tel: URL - 전화번호

<a href="tel:01000000000">010-0000-0000 전화걸기</a>

 

4. mailto: URL - 이메일 주소

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

 

 

---

---

target 속성

• _self: 현재 페이지 (기본값)
• _blank: 새 탭
• _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
• _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰입니다.
• 프레임이름: 직접 프레임이름을 명시해서 사용할 수도 있습니다.

 

---

rel  속성

target=_blank (새로운 탭으로 열기)를 사용했을 때, rel="nooprner noreferrer"가 없다면 웹사이트에 window.opener API 악용 공격에 취약해질 수 있습니다.

최근 브라우저에서는 target=_blank를 지정할 경우, rel="nooprne"설정과 동일한 수준을 적용합니다.