HTML의 핵심 요소, a 태그: 링크의 세계로의 초대

A 태그란?

인터넷의 힘은 연결(링크)입니다. 세상의 모든 웹페이지는 다른 웹페이지와 연결되어 있죠. 이 때 a 태그는 링크를 생성하는 핵심 요소에요. a 태그는 사용자가 다른 페이지로 이동하거나 페이지 내의 특정 위치로 스크롤할 수 있도록 해줍니다. 

 

사용법

<a href="https://www.example.com">이 링크를 클릭하세요!</a>

• a(anchor)는 태그, href 태그 내 속성입니다
• href(Hypertext Reference)에는 링크가 연결되는 대상 URL을 지정합니다
• a 태그를 닫은 뒤 링크를 포함한 텍스트를 입력합니다
• a 태그를 닫습니다

 

예시

저는 네이버로 이동하는 링크를 만들었습니다.

See the Pen A by 40's Programmer (@40sProgrammer) on CodePen.

 

같은 페이지 내에서 특정 위치로 이동

a 태그는  페이지 내의 특정 위치로도 이동시킬 수 있다고 했었죠? 

아래의 사용법과 예시를 살펴봅시다.

 

사용법

<a name="section1">첫 번째 섹션</a>
<a href="#section1">첫 번째 섹션으로 이동</a>

• 처음 a 태그는 아무런 링크가 없지만 name이라는 속성으로 section1이라는 이름을 달고 있습니다
• 두번째 a 태그는 href에 #section1이라는 이동 위치 값을 가지고 있네요

 

예시

 

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

위치를 이동하게 하려고 <br> 태그를 잔뜩 넣었어요.<br> 은 HTML에서 줄바꿈을 나타내는 태그입니다.

 

A 태그의 target 속성

앞의 네이버 링크를 열면 새창이 아닌 현재 창에서 이동하게 됩니다. a 태그의 target 속성은 링크가 어떤 방식으로 열리는지 지정하는 역할을 합니다.

 

사용법

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

• target이라는 속성에 "_blank" 값을 넣습니다
• 이제 이 링크를 누르면 새로운 창이 뜹니다.

 

예시

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

 

target 속성에 들어갈 수 있는 값

1. "_self": 링크를 클릭한 현재 창에서 엽니다. target 속성을 넣지 않았을 경우의 기본값입니다.
2. "_blank": 링크를 새 창이나 탭에서 엽니다. 사용자가 링크를 클릭하면 새로운 창이나 탭이 열리고, 기존 페이지는 유지됩니다.
3. "_parent": 링크를 현재 창의 부모 프레임에서 엽니다. 이 경우는 웹페이지가 여러 프레임을 쓸 때 사용합니다.
4. "_top": 링크를 현재 창의 최상위 창에서 엽니다. 중첩된 프레임 구조에서 사용되며, 링크를 클릭하면 모든 프레임을 무시하고 최상위 창에서 링크의 대상을 표시합니다.