a태그와 하이퍼링크

지난 번 블록요소와 인라인 요소를 설명하며, a태그의 예외적인 포함 규칙을 확인해본 적이 있었습니다.

이번에는 조금 더 자세한 a태그와 하이퍼 링크에 해대 정리를 해보도록 하겠습니다😊

마찬가지로 MDN문서를 바탕으로 정리를 했기에 MDN 문서를 확인하면 보다 자세한 내용을 확인할 수 있습니다.

<a> 태그

<a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 합니다. 별도의 스타일링이 하지 않아도 파란색 글씨에 밑줄되어 나타납니다. 또한 목적지에 한번이라도 방문을 하면 보라색으로 변경됩니다. (※벨로그의 경우 초록색으로 확인됩니다.)

<a href="https://www.mozilla.com">Mozilla</a>

Mozilla

1. href

하이퍼링크가 가리키는 URL을 적을 수 있습니다. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다. 절대경로/상대경로, 이메일/전화를 사용할 수도 있습니다.

<!-- 절대경로 -->
<a href="https://www.mozilla.com">Mozilla</a>

<!-- 상대경로 -->
<a href="./css/main.css">다른 파일</a>

<!-- 이메일/전화 -->
<a href="mailto:0seo8@naver.com">Send email</a>
<a href="tel:555-5309">(555) 5309</a>

2. target

링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

	의미
_self	URL을 현재 브라우징 맥락에 표시합니다. 기본값.
_blank	URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다
_parent	URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
_top	URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.