HTML에서의 링크 태그는 <a> 태그로 표현됩니다.
링크는 특정 문서, URL, 이메일 주소 또는 기타 리소스와의 연결을 제공합니다.
<a> 태그에는 다음과 같은 주요 속성이 있습니다.
- href: 링크가 가리키는 대상의 URL을 지정합니다.
- target: 링크가 열릴 위치를 지정합니다. 기본값은 "self"이며, 현재 탭에서 링크가 열립니다.
"blank"로 지정하면 새 탭에서 링크가 열립니다.
- rel: 링크와 현재 문서 간의 관계를 지정합니다. "nofollow"로 지정하면 검색 엔진에서 링크를 따라가지 않습니다.
- download: 링크가 가리키는 리소스를 다운로드하도록 지정합니다.
- hreflang: 링크가 가리키는 리소스의 언어를 지정합니다.
예:
<a href="https://www.example.com">Example Website</a>
# 앵커 태그
HTML에서의 앵커(Anchor) 태그는 <a> 태그로 표현되며, 페이지 내의 특정 위치에 대한 링크를 생성할 때 사용합니다.
앵커 태그는 페이지 내에서 특정 위치를 가리키는 id 속성을 지정하여 그 위치에 링크를 걸 수 있습니다.
예:
<h2 id="section1">섹션 1</h2>
...
<a href="#section1">섹션 1로 이동</a>위의 예시에서, "섹션 1로 이동"이라는 링크는 id 속성이 "section1"인 <h2> 태그를 가리키는 앵커 태그입니다.
클릭하면 페이지 내에서 "섹션 1"으로 이동합니다.
# 상대 경로
HTML의 링크 태그에서의 상대 URL은 현재 문서와 관련된 URL을 가리킵니다.
즉, 현재 문서의 경로를 기준으로 URL을 지정하는 것입니다.
예:
<a href="page2.html">페이지 2로 이동</a>위의 예시에서, "페이지 2로 이동"이라는 링크는 현재 문서와 같은 경로에 있는 "page2.html"이라는 페이지를 가리킵니다.
즉, 상대 URL은 현재 문서의 경로를 기준으로 타깃 페이지의 경로를 지정하는 것입니다.
# 절대 경로
HTML의 링크 태그에서의 절대 URL은 타깃 페이지의 전체 경로를 지정하는 URL입니다.
즉, 상대 URL에서의 현재 문서와 관련된 것이 아닌, 절대적인 경로를 가지는 URL을 지정하는 것입니다.
예:
<a href="https://www.example.com/page2.html">페이지 2로 이동</a>위의 예시에서, "페이지 2로 이동"이라는 링크는 "https://www.example.com/page2.html"이라는 절대 URL을 가지며, 타깃 페이지의 전체 경로를 지정하는 URL입니다.
# 이메일 링크
HTML에서 이메일 링크를 만드는 다음과 같습니다.
예:
<a href="mailto:email@example.com">Send an Email</a>
위의 예시에서, "Send an Email"이라는 링크를 클릭하면 이메일 클라이언트(예: Gmail, Outlook 등)가 열리고,
"email@example.com"으로 이메일을 보낼 수 있는 화면이 나타납니다.
링크 태그의 mailto: 접두사가 이메일 링크의 구분자입니다.
# target 속성
HTML 링크 태그의 "target" 속성은 링크가 어떻게 열릴지 지정하는 속성입니다.
링크가 새 창이나 탭에서 열릴지, 기존의 창 또는 탭에서 열릴지 등을 지정할 수 있습니다.
기본값으로, 링크는 기존 창 또는 탭에서 열립니다. 하지만, 새 창이나 탭에서 열리도록 지정할 수 있습니다.
예:
<a href="https://www.example.com" target="_blank">새창에서 열기</a>위의 예시에서, "새창에서 열기"라는 링크를 클릭하면 "https://www.example.com"이라는 URL이 새 창에서 열립니다.
"target" 속성의 값이 _blank로 지정되어 있어서입니다.
Target 속성의 종류
"target" 속성에는 다음과 같은 값을 지정할 수 있습니다:
- _blank: 링크가 새 창이나 탭에서 열립니다.
- _self: 링크가 기존 창이나 탭에서 열립니다.
- _parent: 링크가 부모 프레임에서 열립니다. 프레임에서 사용될 경우에만 유효합니다.
- _top: 링크가 프레임을 포함하는 상위 페이지에서 열립니다. 프레임에서 사용될 경우에만 유효합니다.
- frame_name: 링크가 특정 프레임에서 열립니다. 프레임에서 사용될 경우에만 유효합니다.