1. <a> 태그
① <a> 태그의 정의
- a => anchor의 약어, '닻', '정박지'라는 의미를 가지고 있다.
- 같은 문서 내에서 혹은 다른 문서로의 이동을 위해서 사용되는 태그로
인라인 요소를 만드는 인라인 태그이다.
- 'href' 속성을 통해서 문서 내의 특정 위치, 파일, 이메일 주소 등 다른 URL로 연결된 하이퍼 링크를 만들 수 있다.
하이퍼 링크(Hyperlink)
클릭하면 현재 문서 내에서 특정 부분으로 이동하거나 혹은 다른 문서로 이동할 수 있는 수단
줄여서 '링크'라고도 한다.
- 'target' 속성을 통해서 현재 문서에서 새로운 문서로 이동할 때
새로운 문서를 현재 탭에서 열지 아니면 새로운 탭에서 열지에 대한 여부를 설정할 수 있다.
② href 속성
- href => Hypertext Reference의 약어, "하이퍼 텍스트를 참조하다."라는 의미를 가지고 있다.
- href 속성 값으로 적힌 하이퍼텍스트를 참조하는 기능을 가진 속성
하이퍼 텍스트 (Hypertext)
사용자가 한 문서를 읽다가 다른 문서로 순식간에 이동해서 읽을 수 있는 텍스트
여기서 현재 문서를 읽다가 다른 문서로 이동하는 것을 '하이퍼링크(Hyperlink)'라고 했다.
즉, 하이퍼 텍스트란 하이퍼링크를 구현하는 텍스트이다.
- 속성 값으로 URL 뿐만이 아니라, 'tel: (전화번호)'이나, 'mailto: (이메일 주소)'를 통해서
전화번호나 이메일 주소를 연결할 수 있다.
- href 속성을 통해서 문서 간의 이동을 구현하기 때문에
href 속성은 <a> 태그에서는 빠져서는 안 되는 가장 중요한 속성이다.
③ target 속성
- url을 통해서 새로운 문서를 열 때, 현재 탭에서 혹은 새로운 탭에서 표시할지를 정하는 속성
- target="_self" : 새로운 문서를 현재 탭에서 표시한다.
- target="_blank" : 새로운 문서를 현재 탭이 아닌 새로운 탭에서 표시한다.
<!-- a 태그 예제 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a 태그, 링크 예제</title>
</head>
<body>
<!-- 첨부한 하이퍼링크는 모두 같은 페이지이다.-->
<!-- 현재 탭에서 문서를 표시하는 링크 -->
<a href="https://rclogstorage.tistory.com/3" target="_self">
<!-- target 속성의 값을 "_self"로 하면 새로운 문서를
현재 탭에서 표시하게 된다. -->
프로그램과 프로그래밍 언어 (현재 탭 ver)
</a>
<br/>
<!-- a 태그는 인라인 태그이므로 자동으로 줄바꿈이 안된다.-->
<!-- 새로운 탭에서 문서를 표시하는 링크 -->
<a href="https://rclogstorage.tistory.com/3" target="_blank">
<!-- target 속성의 값을 "_blank"로 하면 새로운 문서를
새로운 탭에서 표시하게된다. -->
프로그램과 프로그래밍 언어 (새로운 탭 ver)
</a>
</body>
</html>a 태그, 링크 예제 프로그램과 프로그래밍 언어 (현재 탭 ver)
프로그램과 프로그래밍 언어 (새로운 탭 ver)
2. 마치며
2023.03.29 - 본문 작성 완료 (목차는 분량이 많지 않은 관계로 생략하였음)
'Frontend > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그 (Semantic Tag) (0) | 2023.04.27 |
|---|---|
| [HTML] 목록 만들기 (<ul>, <ol>, <li>) (0) | 2023.04.01 |
| [HTML] <img> 태그 (0) | 2023.03.19 |
| [HTML] 컨테이너 태그(<div>, <span>) & 전역 속성 (0) | 2023.03.16 |
| [HTML] 인라인 태그 8가지 (1) | 2023.03.14 |
