[HTML5] <a> 태그

2020. 7. 6. 16:56 Web Programing/HTML5

<a> 태그


1. 요약(Summary)

문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.


2. 문법(Syntax)

<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>

- href : 링크이름과 연결되어 있는 리소스(resource)의 주소

- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.

- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.

_self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐

_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드

_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드

프래임의 이름


3. 설명(Description)

하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.

- 문서에서 문서로 이동하는 수단

- 태그명 a(anchor)을 사용함

- href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능

- target을 지정해서 문서가 로드될 위치를 지정할 수 있다.


4. 예제(Example)

example1. 아래 예제는 여러가지 형태의 링크를 보여준다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

   <body>

        <p>

            <a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.

        </p>

        <p>

            <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.

        </p>   

        <p>

            <a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.

        </p>

        <p>

            <a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.

        </p>

        <p>

            <a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다

<!--페이지 열리면서 특정 지점으로 이동: #북마크-->

        </p>

</body>

</html>

해당 문서 안의 a 태그중 name의 속성 값에 reference가 있는 지점으로 스크롤을 자동으로 이동시켜준다.--> 북마크 기능


example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다.--> 하나의 문서안에 다른 문서를 로드할 수 있는 기법을 프래임이라고 한다.

<!DOCTYPE html>

<html>

    <body>

        <iframe id="sample" src="http://w3c.org/" width="100%" height="300"></iframe>

        <a href="http://opentutorials.org/" target="sample">아이프래임</a>

    </body>

</html>

--> target의 대상을 <iframe>의 id 속성이다. 


5. 빈 링크

a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 하이퍼링크 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야 한다.

따라서 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.

그리고 이를 빈 링크라고 부른다.


6. 페이지 내부 이동

a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이때는 원하는 장소에 id 속성을 부여해야 한다.

이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 # 아이디 형태의 문자열을 입력한다.

<!DOCTYPE html>

<html>

<head>

    <title>HTML5 Basic</title>

</head>

<body>

    <a href="#alpha">Move to Alpha</a>

    <a href="#beta">Move to Beta</a>

    <a href="#gamma">Move to Gamma</a>

    <hr />

    <h1 id="alpha">Alpha</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <h1 id="beta">Beta</h1>

    <p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>

    <h1 id="gamma">Gamma</h1>

    <p>Nullam porta, felis sit amet porttitor vestibulum.</p>

</body>

</html>

a 태그를 클릭하면 지정한 id 속성이 있는 위치로 스크롤바가 자동으로 이동한다.

cf.) id 속성이 중복될 경우 먼저 나오는 태그로 이동한다.



출처: https://devbox.tistory.com/entry/ㄴㅇ?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]

'Web Programing > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그  (0) 2020.07.06
[HTML5] <input> 태그  (0) 2020.07.06
[HTML5] <form> 태그_GET과 POST  (0) 2020.07.06
[HTML5] <form> 태그 2  (0) 2020.07.06
[HTML5] <form> 태그 1  (0) 2020.07.06
[HTML5] 아이프레임과 프레임  (0) 2020.07.06
[HTML5] <meta> 태그  (0) 2020.07.06
[HTML5] 이스케이핑  (0) 2020.07.06