-
"a" 태그 - href 속성, target 속성, title 속성HTML 2024. 12. 1. 23:59
a 태그는 영단어 anchor에서 온 태그입니다.
anchor는 배를 고정시키는 닻이라는 의미로, (배에서 항구에 정박하거나 섬에 정박할 때 무거운 닻을 땅에 박아서 배를 묶어두곤 했죠)
html에서는 이 화면에서 저 화면으로 이동시켜주는 역할을 합니다.
<html> <head> <title>2024-12-01-日</title> </head> <body> <a>Language-Weaver</a> </body> </html>
기본적으로 시작 tag <a>와 종료 tag </a> 형태로 작성이 됩니다.
다만, 이렇게만 쓰고, 어디로 이동할지를 작성하지 않으면
Clicked 해도, 마우스를 tag 위치에 대어도 아무런 효과가 발생하지 않습니다.
<html> <head> <title>2024-12-01-日</title> </head> <body> <a href="https://free-weave.tistory.com/">Language-Weaver</a> </body> </html>
이렇게 href 속성을 부여하여,
(
href는 Hypertext Reference의 약자로,
Hypertext: 텍스트 내에 다른 문서나 매체로 연결되는 부분을 의미
Reference: 참조, 참고를 의미
따라서 href 속성은 하이퍼텍스트의 참조를 나타내며, a 태그를 통해 연결되는 다른 문서나 리소스의 위치를 지정하는 데 사용)
어디로 이동할지를 지정하면,
hyper-link 기본 디자인 설정인 파란색으로 글자가 물들고, 밑줄이 생기게 됩니다. 만일 한 번 이상 진입했다면 위와 같이 보라색으로 변경이 됩니다.
그리고 하이퍼링크(hyper-link)가 정상적으로 접속이 되는 곳으로 지정했다면, 새로운 탭 혹은 새로운 창 혹은 현재 화면에서 새로운 화면으로 전환이 됩니다.
웹사이트는 아시는 페이지 어디로든 접속이 됩니다.
<html> <head> <title>2024-12-01-日</title> </head> <body> <a href="https://free-weave.tistory.com/" target="_self">Language-Weaver</a> </body> </html>
위와 같이 target(목표) 설정을 하면, 링크 선택 시, 현재 페이지에서 링크된 페이지로 바로 이동이 되게 됩니다.
기본 설정은 "_self"로 자기 자신의 페이지가 이동된다는 의미입니다.
<html> <head> <title>2024-12-01-日</title> </head> <body> <a href="https://free-weave.tistory.com/" target="_blank">Language-Weaver</a> </body> </html>
"_blank"로 target 설정을 하면,
새로운 빈 탭 화면에 href 설정을 한 페이지로 이동되게 됩니다.
"_self(기본 설정, 미지정 시 자동 설정)", "_blank" target 설정을 알아보았는데요, 이외 다른 target 설정도 알아두면 좋습니다.
target 설정 속성 속성 설명 _self 현재 창에서 열기 (기본값) _blank 새로운 창에서 열기
(브라우저 설정에 따라 새로운 탭이 열릴 수 있음)_top 최상위 창에서 열기 _parent 부모 창에서 열기 그리고 자주 사용하는 a 태그 속성으로 title 속성이 있는데,
<html> <head> <title>2024-12-01-日</title> </head> <body> <a href="https://free-weave.tistory.com/" target="_blank" title="Language-Weaver3">Language-Weaver</a> </body> </html>
하이퍼링크에 마우스를 갖다 대면 설명이 표시되게 하는 툴팁(tool-tip) 입니다.
title 속성에 원하는 값을 입력하면,
그 내용이 툴팁으로 표시되게 됩니다.
오늘은 여기까지 하겠습니다. 이상입니다.
'HTML' 카테고리의 다른 글
img 태그 - src, width, height, title, alt 속성 (0) 2024.12.03 "button" 태그 - type 속성, onclick 속성 (0) 2024.12.02 html 기본 구조 (0) 2024.11.29 태그 (0) 2024.11.27 색상 설정하기 - style 태그 background-color 속성 (0) 2024.11.26