💡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를 사용하면 글에서 자유로운 이동을 할 수 있다.
