05.HTML a태그와 id 속성

05.HTML a태그와 id 속성

이번 차례에는 a 태그와 속성값 id의 역할에 대해서 알아보겠습니다.

 

a 에 대해서

a 태그는 anchor의 줄임말이며, 이러한 이유로 앵커라고 부릅니다. a 요소는 보통 작성이 이렇게 작성합니다.

<a href="hello.html">Move to Alpha</a>

a 의 기능

a의 기능은 크게 두 가지입니다. 하나는 링크를 할 수 있는 기능이고 하나는 앵커로써 링크를 타깃 하는 기능을 수행합니다. href 속성을 통해 외부 페이지로 이동할 수 있지만 페이지 안에서도 이동이 가능하게 해줍니다. 

<a href="#alpha">Move to Alpha</a>
    <a href="#beta">Move to Beta</a>
    <a href="#gamma">Move to Gamma</a>
    <h1 id="alpha">Alpha</h1>
    <p>알파구역</p>
    <h2 id="beta">BETA</h2>
    <p>베타구역</p>
    <h3 id="gamma">gamma</h3>
    <p>감마구역</p>

페이지 내부에서 이동을 확인하려면 내용이 많아서 브라우저가 스크롤에 되어야 확인할 수 있습니다. 링크들을 클릭 시 스크롤이 자동으로 글 위치로 이동하는 것을 볼 수 있습니다. 

 

내부에서의 이동은, 외부로 이동하는 것과는 다르게 href 속성값이 '#'으로 시작했다는 것을 볼 수 있습니다. 

 

id 속성

위에서 보다시피 id 속성을 잠시 보았습니다. 

id  속성 값은 한 페이지의 html 문서에 단 한 개만 존재하여야 합니다. 그렇기에 id의 속성값은 중복되어서는 안됩니다. 

다음에 id 와 비슷한 기능을 가진 class 와 비교를 하며 id 속성에 대해서 자세하게 알아보도록 하겠습니다. 지금은 그냥 이름을 지어낸다 정도만 알아두시면 되겠습니다.

a 요소의 다른속성

속성 외에 a 요소에 들어가는 몇 가지 속성들을 살펴보고 마무리하도록 하겠습니다. 다음의 요소들은 href의 링크에 대한 속성들이기 때문에 href 속성 없이 사용하시면 안 됩니다.

 

target 속성

_self : 현재 페이지에서 이동합니다.

_parent : 부모프레임이 있다면 부모 페이지에서 이동합니다.

_top : 최상위 페이지에서 이동합니다.

_blank : 새로운 창에서 페이지가 열립니다.

사용자 정의 : 해당하는 프레임에서 열립니다.

 

하지만 이 target 속성은 권장하는 속성은 아닙니다. 왜냐하면 링크를 현재 페이지에서 열지, 새 창으로 열 지는 사용자의 선택이기 때문입니다.

가급적 target 속성 사용을 지양하여 주시기 바랍니다. 그냥 이런 게 있다 정도만 알고 가시면 되겠습니다. 

 

rel 속성

rel 속성을 통해서 해당 링크와의 관계를 나타낼 수 있습니다. rel 속성을 css를 연결하는 link 요소의 rel 속성과 거의 비슷합니다. 다음에 css를 배울 때 자세하게 알아보도록 하고 지금은 a 요소의 넣을 수 있는 속성값들을 알아보도록 하겠습니다.

 

alternate : 프린트 페이지 또는 번역된 페이지 등등 대안 페이지

author : 저자에 대한 페이지

bookmark : 즐겨찾기 추가 링크

help : 도움말 페이지

license : 저작권 페이지

prev : 이전글

next : 다음글

search : 검색페이지

 

rel 속성을 넣어도 브라우저에 표시되지는 않지만 검색엔진이 활용할 때 쓰이므로 적어주는 것이 좋습니다.

이렇게 a 태그와 id 속성 그리고 그에 포함되는 여러 가지 속성들을 알아보았습니다. id 같은 경우는 다음에 더 알찬 정보로 찾아오겠습니다. 도움이 되셨으면 합니다.