링크 태그
링크 태그
현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다. 보통 링크라고 부르며, <a>태그를 사용한다.
<a> 태그의 속성
| href | 페이지의 경로, 사이트 주소 |
| target | _blank (새 창이나 새 탭), _self (현재 창), _parent (부모 창) |
<a> 태그의 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>링크 태그</title>
</head>
<body>
<a href="https://www.naver.com/">네이버로 이동</a>
<a href="https://www.google.com/" target="_blank">구글로 이동</a>
</body>
</html>
'네이버로 이동'을 클릭하면 현재창에서 페이지가 바뀌고, '구글로 이동'을 클릭하면 새 탭이 열리면서 구글 페이지를 표시한다.
<a> 태그의 사용 예시2
<a> 태그는 꼭 외부 링크로 가는 것 말고도 내부 페이지에서 움직일 수 있다.
즉, 페이지의 세로가 길 때 원하는 부분으로 바로 가고 싶을 때 책갈피 같은 역할로
사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>책갈피</title>
</head>
<body>
<h1 id="title">페이지 책갈피</h1>
<p><a href="#book1">북마크1로 이동</a></p>
<p><a href="#book2">북마크2로 이동</a></p>
<h2>제목1</h2>
<p>1번째 단락</p>
<h2>제목2</h2>
<p>2번째 단락</p>
<h2>제목3</h2>
<p>3번째 단락</p>
<h2>제목4</h2>
<p>4번째 단락</p>
<h2>제목5</h2>
<p><a>5번째 단락</a></p>
<h2>제목6</h2>
<p>6번째 단락</p>
<h2>제목7</h2>
<p id="book1">7번째 단락</p>
<h2>제목8</h2>
<p>8번째 단락</p>
<h2>제목9</h2>
<p>9번째 단락</p>
<h2>제목10</h2>
<p>10번째 단락</p>
<h2>제목11</h2>
<p>11번째 단락</p>
<h2>제목12</h2>
<p>12번째 단락</p>
<h2 id="book2">제목13</h2>
<p>13번째 단락</p>
<h2>제목14</h2>
<p>14번째 단락</p>
<h2>제목15</h2>
<p>15번째 단락</p>
<a id="up" href="#title">맨위로</a>
</body>
</html>상단에 있는 '북마크1로 이동'을 클릭하면 id가 book1인 '7번째 단락'으로 바로 갈 수 있다.
마찬가지로 '북마크2로 이동'을 클릭하면 id가 book2인 '제목13'으로 바로 이동된다.
실제로 웹툰 사이트나 쇼핑몰 사이트같은 스크롤을 하며 내용을 확인하는 사이트는 우측 하단에
'맨 위로 이동'같은 버튼이 있어 페이지 상단에 올라갈 수 있다.
'프론트엔드' 카테고리의 다른 글
| HTML 디스플레이 (Display) (0) | 2024.01.17 |
|---|---|
| HTML 이미지 태그 (0) | 2024.01.17 |
| HTML 리스트 (0) | 2024.01.17 |
| HTML 속성 (0) | 2024.01.17 |
| HTML 기본 형태 및 서식 태그 (0) | 2024.01.12 |
