[HTML] 앵커 태그 (a)

웹페이지를 이용하다 보면 그 페이지 안에서만 활동하는 것보다 다른 페이지를 넘나드는 경우가 더 많습니다. 검색 엔진이라는 것이 그 사실을 기반해서 만든 것이기도 하지 않나 싶습니다. 특정 페이지끼리 연결해주는 역할을 하는 것이 앵커 태그입니다. 

 

<a>

닻을 내린다는 의미인지 '닻'을 의미하는 anchor의 첫 자를 따와서 <a> 태그가 되었습니다. 링크 건다고 말하기도 하는데 다른 웹페이지로 이어질 수 있도록 기능하게 됩니다. 밑줄에 파란색으로 보이고 누르면 다른 링크로 이동하는 하이퍼링크로 알고 계실 겁니다. 그 기능을 웹페이지에서 수행하는 것이 앵커 태그인 것입니다. 

제가 다음으로 하이퍼링크를 만들어보았습니다. 클릭하기 전에는 밑줄에 파란색입니다. 그리고 클릭한 이후에는 파란색이 바랜 것처럼 보라색에 밑줄이 됩니다. 그리고 저는 의식하지 못하고 있었는데 클릭하는 그때에는 글자가 빨간색이 됩니다. 

 

 

href 속성

위 글자를 HTML 형식으로 보면 위와 같습니다. 보면 <a> 태그안에 href 속성이 왔습니다. href 속성 같은 경우에는 목적 URL을 지정해주는 기능을 합니다. 링크 걸어주는 것이 목적이다 보니까 <a> 태그에는 href 속성이 필수라고 해도 무방합니다. 

 

 

target 속성

target 속성은 그렇게 이어진 새로운 웹페이지를 어디에 열 것인가에 대한 속성입니다. 보통 네이버 검색 시에 링크를 타게 되면 새로운 탭에 형성되는데 구글 검색 시에는 새로운 탭이 아니라 해당 탭에서 웹페이지가 바뀌는 것을 경험해보셨을 것입니다. 그 차이를 줄 수 있는 것이 target 속성입니다. target 속성을 주지 않으면 구글처럼 새로운 탭이 아닌 해당 탭에서 링크 이동이 됩니다. 이는 target="_self"가 기본값으로 설정되어 있기 때문입니다. 새로운 탭에서 링크를 열고 싶을 때는 ㅅtarget="_blank"라고 하면 됩니다. 

 

target="_self" → 해당 탭에서 링크 이동 (기본값)
target="_blank" → 새로운 탭에서 링크 열기

 

 

cf) 내부링크

위에서 웹페이지를 연결해주는 것은 외부링크입니다. 근데 <a> 태그는 사실 다른 링크로 이어주는 것뿐이 아니라 해당 웹페이지 내에서 원하는 부분으로 이동시키는 것도 가능합니다. 나무위키에서 클릭 한 번으로 각주로 바로 이동하는 경우나 맨 위, 맨 아래로 이동시키는 경우가 내부링크를 이용하는 경우입니다.

 

원하는 부분에 id값을 주고 hret="#id값"이라고 해주면 해당 부분으로 이동시킵니다. 책갈피 기능이라고 부르기도 합니다.