[HTML] 하이퍼링크 태그 <a> (새 탭으로 열기, 페이지 내 이동)

 하이퍼링크를 연결하는 <a>에 대해서 알아보겠습니다.

 

[ Contents ]

 

 

1. <a> 하이퍼링크 태그

<a href="링크">페이지 이름</a>

 <a> 태그는 'anchor'라는 뜻으로, 하이퍼링크를 연결합니다. href 속성값 지정은 필수이며, 'Hypertext reference'라는 뜻입니다.

 

<a href="https://star7sss.tistory.com">star가 되고나서</a>

 하이퍼링크를 클릭하면, href의 링크 주소로 이동합니다. <a>태그 안 내용은 '밑줄' 친 '파란색' 글자로 표시됩니다.

 

 

클릭한 후

 클릭 후에는 '보라색' 글자로 바뀌며, 이미 접속했던 페이지임을 나타냅니다.

 

 

 

2. <a> 태그 속성값 target

target 속성값
_self	현재 페이지에서 열기 (기본값)
blank	새 탭에서 열기
_top	가장 상위 창에서 열기
_parent	부모창에서 열기
frame 이름	해당 프레임에서 열기

 target은 새로운 페이지가 열릴 곳을 지정합니다. 주로 '현재 페이지'에서 열기 or '새 탭'에서 열기 중 하나이므로, blank 속성값만 알아두면 됩니다.

 

 

구글, 네이버와 같은 웹사이트는 iframe 호출 거부

 나머지 속성값은 페이지 내 또 다른 페이지가 있는 경우 사용합니다. <iframe> 태그를 이용하면 페이지 내에 또 다른 웹페이지를 띄울 수 있습니다. 이렇게 호출한 페이지를 '부모'라고 하고, 호출된 페이지를 '자식'이라고 합니다.

 모든 페이지가 가능하진 않으며, 구글이나 네이버 같은 대부분의 웹사이트는 호출을 막아둡니다. 왜냐하면 iframe을 이용해서 가짜 사이트를 만들거나, 직접 방문하지 않고 다른 사이트에서 iframe으로 방문할 수도 있기 때문이죠.

 

 

 

3. 책갈피 기능

  <h1 id="heading">제목</h1>
  <br>
  <br>
  <a href="#heading">맨 위로 돌아가기</a>

 페이지 내 위치로 이동할 수도 있습니다. 먼저 이동할 위치에 id를 부여합니다.

 그리고 href 속성값에 "#id"를 지정하며, 해당 id를 가진 태그로 스크롤이 이동합니다. 여기서 #은 '같은 페이지 내'를 의미합니다.

 

 

  이 글의 목차도 '책갈피' 기능을 이용한 것입니다. 제목마다 id가 있으며, 목차에는 각 id 태그가 연결되어 있습니다. 한 번 눌러보세요. 그러면 해당 제목으로 이동할 거예요!