<a>태그
앵커태그로 불리는 <a>태그는 하이퍼링크를 연결할 수 있는 태그로 다른 웹페이지를 이동하거나 웹 페이지 내부에서 특정한 위치로 이용할 때 사용된다. 방문하지 않은 링크는 파란색으로, 방문한 링크는 보라색으로 활성 링크는 빨간색으로 표시된다.
<a>태그 기본형식
- <a href="주소" target=""> 내용 </a>
href는 링크의 대상을 나타내는 속성이다. target에는 blank, parent, self, top 속성이 있으며 링크를 열 때 어떻게 열 지에 대해서 지정한다.
| target 속성 | 설명 |
| _blank | 새 창이나 탭에서 링크를 연다. |
| _self | 동일한 창에서 링크를 연다. (기본값) |
| _parent | 상위 창에서 링크를 연다. (없으면 _self) |
| _top | 전체 브라우저 창에서 가장 상위의 창에서 연다. (상위 창 없으면 _self) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://coding-ji.tistory.com/" target="_blank">나의 티스토리로 이동</a><br>
<a href="https://coding-ji.tistory.com/" target="_parent">나의 티스토리로 이동</a><br>
<a href="https://coding-ji.tistory.com/"><img src="dessert.jpg" alt="사막사진입니다." style="width: 300px; height: 300px;"></a>
</body>
</html>
이미지를 눌러 이동하기
기본 형식은 <a href = "주소"><img src="이미지"></a>으로, <img>태그와 <a>태그를 함께 사용하여 이미지를 눌렀을 때 해당 위치로 이동을 할 수 있도록 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://coding-ji.tistory.com/"><img src="dessert.jpg" alt="사막사진입니다." style="width: 300px; height: 300px;"></a>
</body>
</html>
이미지에 이동 영역 설정하기
이미지에 영역을 설정해서 영역에만 앵커태그를 설정하는 방법이다. 이 방법을 사용하면 이미지 전체가 아닌 설정한 영역을 눌러야만 src로 이동이 가능하다. HTML5부터 새로 구현되었다. shape의 경우 직사각형(rect), 원(circle), 다각형(poly)로 이루어져 있으며 coords는 위치를 나타내는 속성으로 직사각형일 경우 모서리의 값 "x1, y1, x2, y2"를 작성해야하고, 원의 경우 원중심의 값(x,y), 반지름(radius)값을 "x,y,radius"을 작성해야한다.
- <img src="주소" usemap="#설정이름">
<map name="설정이름">
<area shape="" coords="" href="" target="">
</map>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="dessert.jpg" width="200px" height="200px" alt="" usemap="#move">
<map name="move">
<area shape="rect" coords="10, 10, 100, 100" href="https://www.tistory.com/" target="_blank">
</map>
</body>
</html>
페이지 내에서 눌러 이동하기
앵커태그에 name 을 사용하여 페이지 내에서 이동이 가능하게 만들 수 있다. <a>태그의 href를 이동하고 싶은 곳의 name으로 설정하여 이동이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<ul>
<a id="top"></a>
<li><a href="#move1">이동1</a></li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="move1">사막사진입니다.</h2>
<img src="dessert.jpg" width="100px" height="100px"><br>
<a href="#top">위로 이동</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
파일 다운로드 링크 만들기
<a>태그의 download속성은 파일을 다운로드 할 수 있는 링크를 만든다. 다운로드 할 파일명은 href 속성에 지정한다. 엣지(Edge)의 경우 사진이 로드되고 오른쪽 마우스를 클릭해서 다운로드 받을 수있다.
- <a href="파일명" download>이름</a>
'Frontend > HTML' 카테고리의 다른 글
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
|---|---|
| HTML 웹 페이지를 통해 사용자 입력을 받는 폼을 만들어 보자 (0) | 2024.06.29 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML의 목록 태그 (0) | 2024.06.27 |
| HTML의 텍스트 관련 태그 (0) | 2024.06.26 |
| HTML의 기본 문법에 대하여 (0) | 2024.06.26 |