링크 역할하는 a 태그의 많이 쓰는 속성들 살펴보기

html5에서의 a 태그는 하이퍼텍스트 즉, 링크 역할을 하는 태그입니다. 대표적으로 링크의 목적지를 나타내는 속성 href가 있습니다.

부가로 링크 된 문서를 열 때의 위치를 지정하거나 현재 문서와 링크된 문서 간의 관계를 지정하는 속성 등 많은 기능이 있습니다.

그럼 지금부터 a 태그 중에 많이 쓰는 속성들을 살펴보겠습니다.


html5 a태그 속성


html a 태그 속성


href 속성

이동하려는 페이지의 URL(주소)을 지정하거나 페이지 내부에서 이동을 제어할 수 있는 속성


네이버로 이동하는 링크를 작성한다면,

<a href="https://www.naver.com">네이버로 이동</a>

으로 작성할 수 있습니다.


같은 페이지에서 위로 가는 페이지를 작성한다고 하면,

<a href="#top">Go to Top</a>

으로 작성할 수 있습니다. 여기서 #은 내부 대상 위치를 지정하는 id 값(속성)입니다.

#과 비슷한 속성은 name이 있습니다. 하지만 html5에서부터는 폐기되어 현재는 id속성으로 사용합니다.


※ id 값(속성)이란?


 문서의 하단과 상단을 지정하려는 코드를 작성해보자.

<a href="#bottom">문서의 하단 지점으로 이동</a>
<a id="top">상단 위치</a>


<a href="#top">문서의 상단 지점으로 이동</a>
<a id="bottom">하단 위치</a>

으로 작성할 수 있습니다. 즉, id는 고유한 이름을 지정하는 속성입니다. 한 페이지에서 단 하나의 이름만 가질 수 있다는 뜻입니다.

이와 반대로 똑같은 의미를 가지고 있지만 한가지 다른 점이 있는 속성이 있습니다. 바로 class 속성입니다.


class 속성은 중복해서 이름을 지정할 수 있는 속성입니다.


공통적으로 id, class 속성은 a 태그뿐만 아니라 body 영역의 모든 태그에서 사용할 수 있습니다. 또한, 나중에 배울 css, javascript 등을 이용하여 유용하게 꾸미거나 기능을 구현할 수 있습니다.


target 속성

이동하려는 페이지를 열 때 어떤 방식으로 웹 브라우저를 띄울 것인지 지정하는 속성


네이버로 이동하는 링크를 작성하는데 이때 새창으로 열고 싶다고 할 때,

<a href="https://www.naver.com" target="_blank">네이버로 이동</a>

으로 작성할 수 있습니다.


_blank : 새창으로 여는 속성값

_self : 새창이 아닌 링크를 클릭한 그 페이지에서 여는 속성값(기본값)

_top : 최상위 페이지에서 이동


rel 속성

해당 링크와 현재 페이지와의 관계를 나타내는 속성


만약, 네이버와 test.html의 관계를 검색 페이지로 인식하고 싶을 때,

<a href="https://www.naver.com" rel="search">네이버로 이동</a>

으로 작성할 수 있습니다.


search : 검색 페이지

next : 다음 글

prev : 이전 글

help : 현재 페이지에 대한 도움말 페이지

license : 저작권 페이지

bookmark : 즐겨찾기 추가를 위한 고유한 링크

author : 저자에 대한 페이지

alternate : 대안 페이지(번역, 오류 페이지 등)


이 속성은 지금까지 살펴본 다른 속성과는 다르게 웹 브라우저 즉, 사용자에게 보여지는 속성이 아닙니다. 바로, 검색엔진 로봇이 이 페이지를 수집할 때, '아, 이건 검색 페이지로 이동하는 링크구나' 라고 인식하여 검색결과에 영향을 끼치는 속성입니다.

블로그나 홈페이지 관리자라면 꼭 체크해야 하는 속성입니다.


요약


  • a 태그는 링크를 걸어주는 태그로 href, target, rel 속성이 있다. 각 속성에는 다양한 속성값이 있다.
  • id와 class 속성은 body 영역에서 사용할 수 있는데 모든 태그에서 사용할 수 있다.
  • id 속성은 고유한 이름이며, class 속성은 중복해서 이름을 지정할 수 있다.




직접 해보기


1. 클릭했을 때 포털사이트 다음으로 이동하는 링크 만들기

2. 1번에 검색 엔진 로봇이 검색 페이지라고 인식할 수 있게  만들기

3. 2번을 바탕으로 새로운 창으로 다음이 나오게 하기

이 글을 공유하기

댓글(4)

  • 2018.10.27 21:05 신고

    잘 보고 갑니다. 자주 보려고 블로그 링크해 놓겠습니다! 좋은 정보 감사합니다아~~!!

    • 2018.10.27 21:22 신고

      블로그 링크해주시다니 감사합니다! 짱꾜님 부족한 부분이 있으면 알려주세요!

  • 2018.10.27 21:27 신고

    넵 HTML 관련 정보 많이 알려주세요! 선생님이라 생각하고 배우겠습니다 ㅎ

    • 2018.10.27 21:29 신고

      어우 저도 배우는 입장입니다!! 그래도 이해하기 쉽게 글 쓰겠습니다! 감사합니다~

Designed by JB FACTORY