HTML 기초 정리(4) - a 태그 (링크)

정의 및 사용법

태그 <a>는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다.

요소 의 가장 중요한 속성 은 링크의 대상을 나타내는 속성 <a>입니다 . href

기본적으로 링크는 모든 브라우저에서 다음과 같이 표시됩니다.

• 방문하지 않은 링크는 밑줄이 그어지고 파란색으로 표시됩니다.
• 방문한 링크는 밑줄이 그어지고 보라색으로 표시됩니다.
• 활성 링크는 밑줄이 그어지고 빨간색으로 표시됩니다.

---

팁과 참고사항

팁: 태그에 속성이 <a>없으면 href하이퍼링크의 플레이스홀더일 뿐입니다.

팁: 다른 대상을 지정하지 않는 한, 링크된 페이지는 일반적으로 현재 브라우저 창에 표시됩니다.

팁: CSS를 사용하여 링크 스타일을 지정하세요: CSS 링크 와 CSS 버튼 .

 

속성 정리

속성	값	설명
download	filename	사용자가 하이퍼링크를 클릭하면 대상이 다운로드되도록 지정합니다.
href	URL	링크가 이동하는 페이지의 URL을 지정합니다.
hreflang	language_code	링크된 문서의 언어를 지정합니다
media	media_query	링크된 문서가 어떤 미디어/장치에 최적화되어 있는지 지정합니다.
ping	list_of_URLs	링크를 따라갈 때 브라우저에서 본문 ping이 포함된 게시물 요청을 보낼 URL의 공백으로 구분된 목록을 지정합니다(백그라운드). 일반적으로 추적에 사용됩니다.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	링크와 함께 보낼 참조자 정보를 지정합니다.
rel	alternate author bookmark external help license next nofollow noreferrer noopener prev search tag	현재 문서와 연결된 문서 간의 관계를 지정합니다.
target	_blank _parent _self _top	링크된 문서를 열 위치를 지정합니다
type	media_type	링크된 문서의 미디어 유형을 지정합니다.

 

 

다양한 예시

이미지를 링크로 사용하는 방법:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100">
</a>

 

새 브라우저 창에서 링크를 여는 방법:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

 

이메일 주소에 링크하는 방법:
<a href="mailto:someone@example.com">Send email</a>

 

전화번호에 연결하는 방법:
<a href="tel:+4733378901">+47 333 78 901</a>

 

같은 페이지의 다른 섹션에 링크하는 방법:
<a href="#section2">Go to Section 2</a>

 

JavaScript에 링크하는 방법:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>