HTML 강좌 9 링크 관련 태그(a,map,area)
안녕하세요 엘빈입니다.
링크는 웹 문서가 다른 일반 문서와 구별되는 가장 큰 특징입니다.
사이트들간의 이동을 생각하시면 쉽습니다.
우리는 해당 사이트의 주소만 알면 웹상에 어디든 이동할 수 있죠.
즉 클릭만 하면 연결된 곳으로 즉시 이동 가능하여 웹 사용을 더욱 편리하게 해줍니다.
Html 문서 또한 링크 이동을 위한 태그들을 제공하고 있습니다.
링크 만들기 <a> 태그와 href 속성
글씨나 메뉴의 버튼 등을 클릭하면 어딘가로 이동하는 현상을 자주 보았을 것입니다.
A 태그는 링크 주소를 통해 해당 주소로 이동할 수 있는 기능을 제공합니다.
A 태그에서 사용 가능한 속성은 다음과 같습니다.
|
속성 |
태그 |
|
Href |
문서나 사이트의 주소값 |
|
Target |
이동 시 표시될 위치를 지정 |
|
Download |
링크 내용을 다운로드함 |
|
Rel |
현재 문서와 링크된 문서의 관계 표시 |
|
Hreflang |
문서의 언어 지정 |
|
Type |
문서 파일 유형을 알려줌 |
(1) href 속성
다음은 링크를 만들기 위한 기본 코드 예제입니다.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <h4>네이버로 바로 이동하기</h4>
9 <a href="http://www.naver.com">네이버</a>
10 <h4>유튜브로 바로 이동하기</h4>
11 <a href="http://www.youtube.com">유튜브</a>
12 </body>
13
사진에서 표시된 것과 같이 네이버를 클릭하면 네이버 사이트로 유튜브를 클릭하면 유튜브 사이트로 이동합니다.
Href에서 경로를 지정하고 a 태그안의 내용을 클릭하면 해당 경로로 이동하는 방식입니다.
(2) target 속성
|
속성 값 |
설명 |
|
_blank |
새 창이나 새탭으로 열림 |
|
_self |
현재 화면으로 열림 |
|
_parent |
링크 내용을 부모 프레임에 표시 |
|
_top |
링크 내용을 전체 화면에 표시 |
새 창으로 열고 싶을 때는 _blank를 현재 화면에 표시하고 싶을 경우 _self을 대부분 사용합니다.
(3) anchor
지금까지 링크는 클릭시 주소값으로 다른 페이지로 이동하는 것을 살펴보았는데요.
앵커란 같은 페이지내에서 특정 위치로 이동할 수 있게 도와주는 기능입니다.
웹 문서가 길어 스크롤 내리기가 귀찮을 때 유용한 기능이죠.
Src 속성으로 줘야 하는 값은 같은 페이지내 태그의 id 값입니다.
다음과 같이 코드를 작성해봅시다.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <h4>가장 밑 문단으로</h4>
9 <a href="#last">네이버</a>
10 <pre>자신과 황금시대의 풀밭에 낙원을 그들은 사막이다.
11
12 청춘을 설레는 두손을 이 하는 때에, 지혜는 따뜻한 사막이다.
13 .........(enter값 생략됨)..................................
14 가는 보는 우리 어디 무엇이 뜨거운지라, 가슴에 그들을 이것이다.</pre>
15 <p id="last">이 문장이 마지막입니다</p>
16
인터넷에서 무작위 글을 생성하여 코드 내에 삽입하였습니다.
맨 마지막 문장에 p 태그를 포함시키고 id 값으로 last를 설정합니다.
또 가장 위쪽 a 태그 링크에 해당 id 값을 줍니다.
항상 id 값을 경로로 찾아갈 때 앞에 #이 붙어야 합니다.
이는 class와 구분을 위한 것으로 이 개념들에 대해서는 나중 포스팅에서 다루겠습니다.
해당처럼 스크롤이 생길 정도로 긴 웹문서가 되었지만 "네이버" 글씨를 클릭하면 가장 아래 문장으로 이동합니다.
여러모로 유용하게 사용되는 속성입니다.
이미지 맵 지정하기 : <map>, <area> 태그 사용
이미지에도 a 태그를 사용해 링크 이동을 구현할 수 있습니다.
웹문서는 클릭한 위치에 따라 이동하는 이미지, 즉 여러 개의 링크를 걸 수 있습니다.
이를 위해 사용되는 것은 map 태그입니다.
다음과 같이 코드를 작성해봅시다.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset = "utf-8">
5 <title>첫 홈페이지 만들기 프로젝트</title>
6 </head>
7 <body>
8 <img src="./minions2.jpg" usemap="#minion">
9 <map name="minion">
10 <area shape="react" coords="10,10,160,200" href="http://www.naver.com">
11 <area shape="react" coords="200,10,380,200" href="http://www.youtube.com">
12 </map>
13 </body>
14 </html>
Usemap 속성을 이용해 map 태그와 img 태그를 연결합니다.
Map 태그 안의 area 태그를 통해서 범위와 경로를 지정합니다.
위의 코드는 사진 왼쪽을 클릭 시 네이버로 오른쪽 클릭 시 유튜브로 이동하게 하였습니다.
위 사진처럼 클릭하려고 하면 해당 범위가 표시되는 것을 알 수 있습니다.
완전히 클릭하면 설정된 경로로 이동합니다.
마무리
지금까지 링크에 관련된 태그들에 대해서 공부해보았는데요.
단순히 페이지 이동이 아닌 여러가지 이동을 위해 자주 사용되는 태그입니다.
다음 포스팅으로 넘어가기 전에 꼭 숙지하시기 바랍니다.
포스팅 읽어주셔서 감사합니다.
이전 포스팅
'개발 > HTML_CSS' 카테고리의 다른 글
| HTML 강좌 input 태그 총정리 (0) | 2020.01.13 |
|---|---|
| HTML 강좌 form 구조에 대해서 (0) | 2020.01.13 |
| Html 강좌 8 이미지 관련 태그 정리 (0) | 2020.01.12 |
| html 강좌 7 표(테이블) 관련 태그 정리, 간단하게 만들자 (0) | 2020.01.11 |
| html 강좌 6 목록 관련 태그 정리 (0) | 2020.01.10 |
