[HTML5]링크 태그

링크 태그에 대해 설명합니다

모든 포스트 목록

링크와 관련된 개념

노드

HTML 문서나 멀티미디어 정보를 표현하는 기본단위

링크

노드를 연결하는 내비게이션 역할

앵커

HTML 문서 내에서 링크의 출발점이나 도착점

링크의 종류

1. 특정 단어나 문장, 이미지에서 다른 문서로 이동
2. 외부 URL로 연결
3. 문서 내 다른 지점으로 링크

링크 태그

<a href="파일이름 or URL" title="설명" target="창">링크 텍스트</a>

링크의 시작점 앵커를 표현하는 태그

• href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL) 지정
  • 절대 주소 : http://로 시작하는 URL 형시그이 인터넷 주소
  • 상대 주소 : 현재 문서를 기준으로 한 주소
• title 속성 : 말풍선 창에 나올 설명을 기입
• target 속성 : 창으로 이동할 방법
  • _self
  • _blank
  • _parent
  • _top
  • iframe



title 예시






• id 속성 : 동일한 문서 내에서 특정 위치로 이동할 때 목적지
  시작점에는 href 속성에 "#(id값)"을 넣는다

아래 예시는 이 페이지의 소스 입니다. 예시를 확인해보세요

<header>
  <p>링크 태그에 대해 설명합니다</p><br />
  <nav>
    <strong><a href="https://qhrhksgkazz.tistory.com/65" src="목록" target="_blank" title="포스트 목록">모든 포스트 목록</a></strong>
  </nav>
</header>
<article><section>
  <h3>링크와 관련된 개념</h3>
  <ol>
    <li>노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본단위</li>
    <li>링크 : 노드를 연결하는 내비게이션 역할</li>
    <li>앵커 : HTML 문서 내에서 링크의 출발점이나 도착점</li>
    <li>링크의 종류<ol>
      <li>특정 단어나 문장, 이미지에서 다른 문서로 이동</li>
      <li>외부 URL로 연결</li>
      <li><a id="anchor">문서 내 다른 지점으로 링크</a></li>
    </ol></li>
  </ol>
</section>
<section>
  <h3>링크 태그</h3>
  <p>&lt;a&gt; : 링크의 시작점 앵커를 표현하는 태그<br />
  &lt;a href="파일이름 or URL" title="설명" target="창"&gt;링크 텍스트&lt;/a&gt;</p>
  <ul>
    <li>href 속성 : 이동하고자 하는 목적지 문서의 파일 주소(URL) 지정<ul>
      <li>절대 주소 : http://로 시작하는 URL 형시그이 인터넷 주소</li>
      <li>상대 주소 : 현재 문서를 기준으로 한 주소</li>
    </ul></li>
    <li>title 속성 : 말풍선 창에 나올 설명을 기입</li>
    <li>target 속성 : 창으로 이동할 방법<ul>
      <li>_self</li>
      <li>_blank</li>
      <li>_parent</li>
      <li>_top</li>
      <li>iframe</li>
    </ul></li>
      <figure><figurecaption>title 예시<br /><br /></figurecaption>
     <img src="https://t1.daumcdn.net/cfile/tistory/99ECD9355CB4141D13" style="border : solid"></figure><br /><br />
    <li>id 속성 : 동일한 문서 내에서 특정 위치로 이동할 때 목적지<br />
    시작점에는 href 속성에 "#(id값)"을 넣는다</li>
  </ul>
   <a href="#anchor">예시를 확인해보세요</a><br />
  <pre><code class="html">a</code></pre>
</section>
</article>
<footer><p>#html5 #링크<br />
참고 : HTML5 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환</p></footer>

#html5 #링크
참고 : HTML5 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환