[생활코딩] WEB1(HTML_07) HTML 태그의 제왕

* Windows 운영체제 기준으로 작성되었습니다.

 

§ HTML 태그의 제왕 → Click!

 

이번에는 HTML에서 가장 중요하다고 여겨지는 태그 <a>에 대해서 공부해봅시다. a는 anchor의 첫글자를 땄으며 정보의 바다에 정박한다는 닻을 의미하며, 링크를 거는데 사용됩니다. 이 태그가 없었다면, 전세계의 모든 웹페이지는 고립되었을 것이며, 검색 엔진 역시 없었을 것입니다. 제가 위의 Click!이란 글자에 링크를 걸어둔 것처럼 이번엔 <a> 태그를 이용해 지난번에 만들어두었던 웹 페이지에 링크를 걸어봅시다!

 

저는 지난번에 작성했던 시 아무르 강가에서/박정대 님의 시가 담겨있는 책의 링크를 [출처] 아무르 강가에서 / 박정대 이 부분에 달아보고자 합니다.

<a href="https://book.naver.com/bookdb/book_detail.nhn?bid=152679">"링크를 걸고 싶은 텍스트"</a>

여기에서 href는 hypertext(link)의 h와 reference의 ref가 겹쳐친 것으로 다음의 링크를 참조하라는 뜻이며 href 뒤에 걸고 싶은 링크를 작성하시면 됩니다.

요렇게 링크가 걸린 것을 확인 할 수 있습니다. 링크가 걸린 텍스트를 눌리면, 제가 걸어둔 책 소개 페이지로 바로 연결되는 모습을 볼 수 있습니다. 만약 새로운 창으로 띄우고 싶다면 링크 뒤에 속성을 추가해주면 됩니다!

<a href="https://book.naver.com/bookdb/book_detail.nhn?bid=152679" target="_blank">"링크를 걸고 싶은 텍스트"</a>

이렇게 새 탭에 책 소개 페이지 링크가 뜨는 것을 볼 수 있네요! 또한 링크를 클릭하기 전 어떤 링크를 가리키는지 툴팁으로 알려주고 싶은 경우 또 속성을 추가해주시면 됩니다!

<a href="https://book.naver.com/bookdb/book_detail.nhn?bid=152679" target="_blank" title="책 소개 페이지">"링크를 걸고 싶은 텍스트"</a>