앵커 태그 : <a>
HTML의 앵커 태그 즉, <a> 태그는 다른 페이지 또는 같은 페이지의 특정 위치나 파일과 같은 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 기능을 한다. 우선 'anchor'라는 단어의 사전적 의미는 '닻을 내리다' '정박하다' '고정시키다' 라는 뜻이다. 사실 왜 앵커(anchor) 태그라는 이름을 붙인건지는 잘 모르겠지만, 'anchor'의 뜻을 HTML 앵커 요소의 기능과 연관시켜 생각해보면 -현재 페이지에 하이퍼링크로 연결되는 다른 페이지를 고정시킨다- 정도로 이해할 수 있을 것 같다.
<a href="https://www.tistory.com/">Tistory</a>
<a> 태그는 문법적으로, 이동할 주소값을 나타내는 'href' 속성(attribute)을 함께 작성해 주어야 한다. 'href'는 'hypertext reference' 로, hypertext HTML 웹문서 또는 reference 주소값을 뜻한다. 브라우저는 <a> 태그의 요소를 밑줄 처리해 표시하고 요소 위에 마우스를 가져가면 클릭할 수 있는 마우스 아이콘으로 변경된다.
href 속성에 연결할 주소값을 표기하는 방법은 크게 4가지가 있다.
<a href="https://www.youtube.com">YOUTUBE</a>
<a href="./index.html">Index</a>1. 절대주소 혹은 상대주소
보통 다른 웹 사이트로 이동하는 경우 절대 URL로 연결하고, 현재 HTML 페이지가 아닌 다른 HTML 페이지로 이동할 경우 상대 URL로 HTML 파일을 연결한다.
<a href="#section2">Go to Section 2</a>
<div id="section2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum unde maxime repellat, beatae odit mollitia nisi minima nostrum nihil, magni autem nulla voluptates, saepe amet perferendis ducimus officiis necessitatibus? Quis, deleniti! Nobis accusantium magnam facere doloremque fuga, saepe hic possimus, veniam suscipit neque debitis, quae dignissimos dolorum necessitatibus atque ducimus?
</p>
</div>2. id 속성값으로 페이지 내 이동
같은 페이지 내 다른 요소로 이동하기 위해서는 고유식별자인 id 속성을 사용한다. 이동하고자 하는 목적지 요소에 id 값을 주고, <a> 태그의 href 값에 id 선택자(#)와 id 값을 적는다. id 속성은 후에 CSS에서 class 속성과 함께 자세히 배우게 될거다.
<a href="mailto:smartg@email.com">똑쥐에게 이메일 보내기</a>3. URL을 사용하는 이메일 주소
href 속성에 mailto: 를 적어주고 그 뒤에 사용자로부터 메일을 받고자 하는 이메일 주소를 적으면, 사용자가 링크 클릭시 사용자 컴퓨터의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있다.
<a href="tel:+00.0000.0000">똑쥐에게 전화 걸기</a>4. URL을 사용하는 전화번호
마찬가지로 href 속성에 tel: 을 적어주고 그 뒤에 전화번호를 적으면 된다. tel: 링크의 경우 그 웹 사이트를 보고 있는 장치에 따라 동작이 바뀔 수 있다. 휴대전화에서는 번호를 자동으로 입력할 것이고, 컴퓨터로 이용하고 있을 경우 Skype나 FaceTime과 같은 프로그램으로 동작할 수 있다.
<a> 태그에 사용할 수 있는 유용한 속성이 한 가지 있다. 바로 'target' 속성인데, 연결할 URL을 표시할 위치(브라우징 맥락에서의 탭, 창)를 지정할 수 있다.
<a href="https://www.tistory.com/" target="_self">Tistory</a>
<a href="https://juheeexx.tistory.com/" target="_blank">똑쥐 티스토리 바로가기</a>
target 속성에 사용할 수 있는 값이 몇개 있지만, 우리가 알아야 할 것은 가장 많이 쓰이는 '_blank' 값이다. 첫 번째 코드의 target="_self" 는 URL을 현재 브라우징 맥락에 표시 즉, 현재 페이지를 연결하고자 하는 페이지로 전환시킨다. 이게 <a> 태그의 기본값이기 때문에 기본값으로 사용하려면 target 속성은 생략해도 된다. 하지만! 링크를 눌렀을 때 현재 페이지는 그대로 있고 새 탭으로 이동시키기 위해서는 target 속성을 이용해 '_blank' 값을 지정해 주어야 한다. 별표 땡땡 ⭐️⭐️!!
댓글