HTML5 : 하이퍼링크 <a>

HTML5 : 하이퍼링크 <a>

정의와 사용

<a>태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의한다.

<a>태그의 가장 중요한 속성(attribute)는 링크의 목적지를 나타내는 href 속성이다.

기본적으로 링크는 모든 브라우저에서 다음과 같이 나타난다:

• 방문하지 않은 링크는 파란색이다.
• 방문한 링크는 밑줄이 그어지고 자주색이 된다.
• 활성 링크에는 밑줄이 그어지고 빨간색이 표시된다.

기본형

<a href="링크할 주소"></a>

자주쓰는 속성

href

링크한 문서나 사이트의 주소를 입력한다.

<a href="URL"></a>

target

링크한 내용이 표시될 때 현재 창 또는 새 창을 지정한다.

<a href="URL" target="_self">현재창</a>
<a href="URL" target="_blank">새창</a>
<a href="URL" target="_parent">부모프레임</a>
<a href="URL" target="_top">전체화면</a>

_self : 기본값. 링크가 있는 화면이 열린다. 

_blank : 링크 내용이 새창이나 새 탭에서 열린다. 

_parent : 프레임을 사용했을 때 링크내용을 부모 프레임에 표시한다. 

_top : 프레임을 사용했을 때 프레임을 벗어나 최상위 프레임에서 열린다.

frameName : 해당 프레임에 표시한다.

download

링크한 내용을 보여주는 것이 아니라 다운로드한다.

<a href="URL" download="filename"></a>

hreflang

링크한 문서의 언어를 지정한다.

1

<a href="URL" hreflang="ko"></a>

cs

type

링크한 문서의 파일 유형을 알려준다.

<a href="https://kutar37.tistory.com" type="text/html">블로그</a>

rel

현재 문서와 링크한 문서의 관계를 알려준다 : 참고

<a rel="me" href="http://www.functravel.com/">Cheap Flights</a>

• alternate
  author
  bookmark
  external
  help
  license
  next
  nofollow
  noreferrer
  noopener
  prev
  search
  tag

media

링크 된 문서가 최적화되어있는 미디어 / 장치를 지정한다.

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">Open media attribute page for print</a>

앵커 : 한 페이지 안에서 점프하기

앵커는 같은 페이지 안에서의 링크로, 특정 id 등을 따라 이동하고 싶은 위치를 지정할 수 있다.

모던 웹의 패러다임인 SPA(Single Page Application)에서 자주 사용되는 방법이다.

예 :  http://demo.themewagon.com/preview/bootstrap-4-business-template 

위의 링크에 들어가면 최상단 메뉴마다 앵커가 걸려 있어, 동 페이지 안의 해당지점으로 이동하게 해준다.

사용

이동하고 싶은 태그에 id를 부여하고, <a>태그의 href 속성에 "#id"를 부여해 해당 태그로 이동한다.

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

    <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><a href="#menu">메뉴로</a></p>
    <h2 id="content1">내용2</h2>
    <p>웹 문서가 너무 길 경우 ..... 앵커 </p>
    <p><a href="#menu">메뉴로</a></p>
    <h2 id="content1">내용3</h2>
    <p>웹 문서가 너무 길 경우 ..... 앵커 </p>
    <p><a href="#menu">메뉴로</a></p>