[HTML] Link (링크)

💡Link

---

<a> 태그는 anchor(닻)의 약자로, Link 태그라고도 부른다.

링크 속성

• a.href
• a.target

a.href는 클릭하면 이동할 URL을 넣는 속성이다. 이때 href는 reference a hyperlink의 약자이다.

a.target은 열거형으로 _self | _black | _parent | _top | 프레임명을 사용한다.

 

a.href 속성

내부 링크 외부 링크

• 내부 링크는 같은 사이트 내의 이동을 의미한다.
• 외부 링크는 다른 사이트의 이동을 의미한다.

<h1>링크</h1>
<a href="ex10_list.html">링크입니다.</a>

<h2>내부 링크</h2>
<a href="ex10_list.html">링크입니다.</a>

<h2>외부 링크</h2>
<a href="https://isaac-christian.tistory.com/">링크입니다.</a>

링크는 파란색 또는 보라색으로 색이 다르며, 밑줄이 생기는 게 일반적이다.

외부 링크를 이용할 때에는 프로토콜(https://)을 반드시 붙여 주어야 한다.

 

a.target 속성

_blank

a.target 속성을 _blank로 지정하면 같은 창에서 이동하지 않고 새 창으로 화면이 뜬다.

_self는 내부 링크용으로 많이 쓰고, _blank는 외부 링크용으로 많이 사용한다.

 

💡앵커 (anchor)

---

href가 붙으면 link라고 부르고, href가 붙지 않으면 anchor라고 부른다.

문서 내부에서 스크롤이 발생했을 때, 문서 내의 이동에서 스크롤을 이동하는 도구로 앵커를 사용한다.

 

앵커의 사용

<h2><a name="a1">제주도</a></h2>
<h2><a name="a2">울릉도</a></h2>
<h2><a name="a3">독도</a></h2>

이동하고 싶은 장소를 찾은 뒤에 <a> 태그로 묶는다.

그리고 <a> 태그에 name 속성을 넣고 영어, 숫자, 언더바를 사용하여 식별자를 붙인다.

이를 표지판을 세우는 과정으로 이해하면 된다.

그리고 href 속성에서 link와 구분하기 위해 '#'을 붙여 anchor의 식별자를 작성한다.

 

<h1 id="title">앵커</h1>

<ul>
    <li><a href="#a1">제주도</a></li>
    <li><a href="#a2">울릉도</a></li>
    <li><a href="#a3">독도</a></li>
</ul>

<h2><a name="a1">제주도</a></h2>
<p>1 설명입니다.</p>
<p>2 설명입니다.</p>
<p>3 설명입니다.</p>
<p>4 설명입니다.</p>
<p>5 설명입니다.</p>
<p>6 설명입니다.</p>
<p>7 설명입니다.</p>
<p>8 설명입니다.</p>
<p>9 설명입니다.</p>
<p>10 설명입니다.</p>
<p>11 설명입니다.</p>
<p>12 설명입니다.</p>
<p>13 설명입니다.</p>
<p>14 설명입니다.</p>
<p>15 설명입니다.</p>

<h2><a name="a2">울릉도</a></h2>
<p>1 설명입니다.</p>
<p>2 설명입니다.</p>
<p>3 설명입니다.</p>
<p>4 설명입니다.</p>
<p>5 설명입니다.</p>
<p>6 설명입니다.</p>
<p>7 설명입니다.</p>
<p>8 설명입니다.</p>
<p>9 설명입니다.</p>
<p>10 설명입니다.</p>
<p>11 설명입니다.</p>
<p>12 설명입니다.</p>
<p>13 설명입니다.</p>
<p>14 설명입니다.</p>
<p>15 설명입니다.</p>

<h2><a name="a3">독도</a></h2>
<p>1 설명입니다.</p>
<p>2 설명입니다.</p>
<p>3 설명입니다.</p>
<p>4 설명입니다.</p>
<p>5 설명입니다.</p>
<p>6 설명입니다.</p>
<p>7 설명입니다.</p>
<p>8 설명입니다.</p>
<p>9 설명입니다.</p>
<p>10 설명입니다.</p>
<p>11 설명입니다.</p>
<p>12 설명입니다.</p>
<p>13 설명입니다.</p>
<p>14 설명입니다.</p>
<p>15 설명입니다.</p>

<a href="#title">처음으로</a>

 

id의 anchor역할

<a href="#title">처음으로</a>

id는 anchor의 역할을 하지 않지만, anchor의 역할을 대신하기도 한다.

이러한 anchor를 사용하면 글에서 자유로운 이동을 할 수 있다.