문서의 이동
<a> 태그는 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 링크 요소를 만들어주는 태그입니다. <a> 태그 내부에 포함된 콘텐츠를 클릭하면 지정된 위치로 이동하는 방식이기 때문에, 텍스트를 포함한 경우에는 텍스트 링크가 만들어지고 이미지를 포함한 경우에는 이미지 링크가 만들어집니다.
<a> 태그의 href(hypertext reference) 속성은 요소를 통해 연결하고자 하는 문서나 사이트의 주소 등을 입력하는 속성으로, 링크 요소의 핵심 속성입니다. 아래 예제는 네이버 홈페이지의 주소로 이동할 수 있는 링크를 만든 예이며, 요소를 클릭하면 네이버 홈페이지로 이동하게 됩니다.
<body>
<h1>
네이버 홈페이지로 이동하려면
<a href="https://www.naver.com/">여기</a>
를 클릭
</h1>
</body>
위 결과에서 '여기'라고 쓰여있는 부분을 클릭하면 네이버 홈페이지가 열리게 됩니다.
새 탭에서 열기
위 예제에서 '여기'를 클릭하면, 화면 내에서 보고 있던 문서가 사라지고 href에 지정된 주소로 문서가 변경됩니다. 이 상황에서 원래 보고 있던 문서로 돌아가기 위해서는 브라우저의 [뒤로 가기]를 눌러야 합니다. 그러나 <a> 태그의 target 속성을 활용하면 기존에 보고 있던 문서를 그대로 유지한 채, 연결된 문서를 새로운 탭에서 열 수도 있습니다.
target 속성의 기본값은 "_self"로, 이는 "현재 탭에서 열기"를 의미하는 값입니다. 그러나 target의 값을 "_blank"로 변경하게 되면 "새 탭에서 열기" 기능이 활성화됩니다.
기본값이란 따로 값을 지정하지 않아도 이미 적용되어 있는 값을 의미합니다.
<body>
<h1>두 링크의 차이를 비교해보세요</h1>
<a href="https://www.naver.com/" target="_self">
현재 탭에서 열기
</a>
<a href="https://www.naver.com/" target="_blank">
새 탭에서 열기
</a>
</body>
위 결과를 통해 <a> 요소가 인라인 요소임을 확인할 수 있습니다.
전화 걸기와 메일 보내기
<a> 태그의 href 속성에는 문서의 URL 외에 전화 번호나 메일 주소 등을 지정할 수도 있습니다. 이 경우 링크 요소는 새로운 문서를 여는 것이 아닌, 전화를 걸거나 메일을 보낼 때 사용하는 프로그램을 열어주는 역할을 합니다. 예를 들어 href에 전화 번호를 지정한 문서를 모바일에서 열고 이를 클릭하면 해당 번호로 전화가 가고, href에 메일 주소를 지정한 상태에서 이를 클릭하면 별도의 메일 작성 프로그램이 열리게 됩니다.
href 속성에 전화 번호나 메일 주소를 지정할 때는 각각 "tel:"과 "mailto:" 문자열을 맨 앞에 작성해 해당 값이 전화 번호 또는 메일 주소라는 것을 명시해주어야 합니다.
<body>
<a href="tel:010-1234-5678">
전화 걸기
</a>
<a href="mailto:test@naver.com">
메일 보내기
</a>
</body>전화를 걸거나 메일을 보내는 방식은 문서를 이용하는 환경(PC, 모바일)에 따라 무척 다양합니다. 가령 모바일 환경에서 전화 걸기 링크를 클릭하면 바로 전화가 연결되지만, PC에서 전화 걸기 링크를 클릭하면 화상 전화 앱 설치를 유도하거나 이미 설치되어 있는 화상 전화 앱이 열리게 되는 등 상황에 따라 결과가 다를 수 있습니다. 따라서 이는 각자의 환경에서 직접 확인해보실 것을 추천합니다.