<a> : 링크 만들기

1. href 속성 : 링크 주소

 

<a> 태그의 링크를 통해 넘어갈 다른 문서나 사이트를 href 속성을 통해 지정해 준다.

1. 텍스트 링크 : <a href="www.naver.com">naver</a>
2. 이미지 링크 : <a href="www.naver.com"><img src="naver.jpg" alt=""></a>

 

2. target 속성 : 새 탭에서 링크 열기

 

속성 값	설명
_blank	링크 내용이 새 창이나 새 탭에서 열린다.
_self	target 기본값, 링크를 누르는 해당 화면에서 열린다.
_parent	프레임을 사용했을 때, 링크 내용이 부모 프레임에서 열린다.
_top	프레임을 사용했을 때, 링크 내용이 프레임에서 벗어나서 열린다.

parent 웹문서가 위와 같을 때 기본값으로 링크를 열게 되면, 저 사각형 안에서 링크 내용이 나타나게 된다.

그 아래 링크의 _top 속성으로 열게 되면 전체 화면으로 표현된다.

 

📌 _parent 과 _top 의 차이

현재 3 개의 iframe 이 다음과 같이 중첩되어 있다고 가정해보자.

<!-- 첫번째 iframe -->
<h1>iframe1</h1>
<iframe src="iframe2.html" width="560px" height="320px" name="f2"></iframe>
<a href="https://www.daum.net" target="f2">다음</a>

<!-- 두번째 iframe -->
<h1>iframe2</h1>
<iframe src="iframe3.html"></iframe>

<!-- 세번째 iframe -->
<h1>iframe3</h1>
<a href="https://www.daum.net" target="_top">다음</a>

이 때 세번째 iframe 의 속성을 _top 로 해놓고 링크를 클릭하면 다음과 같이 페이지가 열린다.

이를 다시 _parent 속성으로 바꾸어 링크를 눌러 이동해보면 다음과 같이 나타난다.

이 두 속성 값의 차이는 바로 여기서 나타난다.

_top 속성 값의 경우에는 iframe 의 계층 구조가 어떻게 되어 있던 상관없이 가장 상위의 태그에서 기능을 수행한 것이고,

즉 여기서는 첫 번째 iframe 의 위치에서 링크가 열린 것이다.

_parent 속성 값의 경우에는 자신을 기준으로 바로 위의 부모 태그에서 기능이 수행된다. 

세 번째 iframe 의 위치였기 때문에 두 번째 iframe 의 위치에서 링크가 열리게 된 것이다.

 

3. anchor 만들기

 

한 페이지 내부에서 지정하는 위치로 이동하고자 할 때 유용하게 사용할 수 있는 기능이다.

예를 들어 화면을 보다가 맨 밑으로 옮겨왔을 때 다시 맨 위로 이동하는 것이 번거로울 수 있다.

그렇다면 맨 위로 이동하는 링크가 있다면 편하지 않을까? 

 

이럴 때 필요한 기능이 바로 앵커이다. 

앵커는 메뉴별로 세부 항목을 기입한 곳으로 이동하기에도 적합한 기능이다.

즉 앵커는 스크롤바가 생기는 문서에서 동작 가능한 기능이다.

<대상태그 id="앵커 이름"> 텍스트 또는 이미지 </대상태그>
<a href="#앵커 이름"> 텍스트 또는 이미지 </a>

기본적으로 위와 같이 작성하며,

주의해야 할 점은 a 태그를 작성 시 앵커의 이름은 #을 쓰고 작성해야 함을 잊으면 안 된다.

HTML 에서 #은 id 이름을 호출하겠다는 의미로 사용되기 때문에 즉, id 가 앵커 이름인 요소를 대상으로 하겠다는 의미가 된다.

<ul id="menu">
		<li><a href="#content1">메뉴1</a></li>
		<li><a href="#content2">메뉴2</a></li>
		<li><a href="#content3">메뉴3</a></li>
</ul>
<h2 id="content1">내용1</h2>
	<p>내용내용</p>
	<p>내용내용</p>
	<p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
	<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content2">내용2</h2>
	<p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
	<p><a href="#menu">[메뉴로]</a></p>
<h2 id="content3">내용3</h2>
	<p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
    <p>내용내용</p>
	<p><a href="#menu">[메뉴로]</a></p>

[메뉴로] 링크를 누르게 되면 href 속성에 주어진 링크의 주소를 읽게 되고 # 이 작성된 것으로

id 값이 menu 와 동일한 요소를 찾게 된다.

 

위의 이미지는 HTML 에 대한 나무위키 설명 중 일부분이며, 빨간 색으로 표시된 부분이 앵커가 적용된 부분이다.

앵커를 클릭하기 전에는 다음과 같은 url 을 확인할 수 있다.

그럼 2번 앵커를 누르게 되면 화면과 url 은 어떻게 바뀌어 있을까?

화면에서는 2번 앵커가 명확히 보일 수 있도록 가장 상단에 위치시켜 스크롤을 이동시켜 주었다.

url 은 다음과 같이 바뀌었다.

내가 무슨 앵커를 눌렀는지 그 값이 표시되는 것인데,

해당 페이지에서는 2번 앵커의 이름(id)을 'fn-2'으로 지정하고 있는 것을 확인할 수 있다.

여기서 가장 주의해야 할 점은 바로 '#'이 함께 쓰였다는 점이다.

 

 

4. <map>, <area>, usemap 속성 : 이미지 맵 지정

 

지금까지는 하나의 이미지에 하나의 링크를 연결해 보았다.

이제는 하나의 이미지의 영역을 구분하여 각 영역에 서로 다른 링크를 연결해 보고자 한다.

기본 형태는 다음과 같다.

<map name="맵이름">
	<area>
    <area>
</map>

<img src="이미지 파일" usemap="#맵이름">

속성	설명
alt	대체 택스트 지정
coords	링크 영역을 시작 좌표와 끝 좌표를 이용하여 지정
download	링크를 클릭했을 때 다운로드
href	링크 경로 지정
media	어떤 미디어에 최적화 시킬지 지정
rel	현재 문서와 링크 문서와의 관계 지정 lterator, bookmark, help, license, next, nofollow, noreferer,  prefetch, prev, search, tag
shape	영역의 형태 지정 default, rect, circle, poly
target	링크를 표시할 대상 지정 _blank, _parent, _self, _top,  프레임 이름
type	링크 문서의 미디어 유형 지정

위의 속성을 바탕으로 다양한 지정을 할 수 있다.

 

예를 들어 시작 좌표 (0, 0) 에서 끝 좌표 (100, 100) 까지 사각형 형태의 영역을 클릭했을 때 네이버 사이트로 이동하는 링크를 만들고자 한다면 다음과 같이 나타낼 수 있을 것이다.

<map name="naver">
	<area shape="rect" coords="0,0,100,100" href="www.naver.com" alt="네이버">
</map>