본문 바로가기
HTML CSS JS(프론트엔드)

7. [HTML/CSS] a 태그는 HTML에서 하이퍼링크를 생성하는데 사용되는 태그입니다.

by 아몰라코딩 2024. 12. 12.

a 태그는 HTML에서 하이퍼링크를 생성하는데 사용되는 태그입니다.

기본 문법

<a href="URL">링크 텍스트</a>

주요 속성

  • href: 링크의 목적지 URL을 지정합니다.
  • target: 링크가 열리는 방식을 지정합니다.
    • _self: 현재 창에서 열기 (기본값)
    • _blank: 새 창이나 탭에서 열기
    • _parent: 부모 프레임에서 열기
    • _top: 전체 창에서 열기
  • rel: 현재 문서와 링크된 문서 사이의 관계를 정의합니다.
  • download: 링크를 클릭했을 때 파일을 다운로드하도록 지정합니다.

사용 예시

웹사이트 방문하기


새 탭에서 열기


PDF 다운로드


이메일 보내기


전화하기

주의사항

  • 외부 링크를 새 탭에서 열 때는 보안을 위해 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.
  • 링크 텍스트는 명확하고 설명적이어야 하며, "여기를 클릭하세요"와 같은 모호한 표현은 피해야 합니다.
  • 접근성을 위해 필요한 경우 title 속성을 사용하여 링크에 대한 추가 설명을 제공할 수 있습니다.

target="_self"와 target="_blank" 차이점

**target="_self"**는 현재 페이지에서 링크가 열리는 기본값입니다. 사용자가 링크를 클릭하면 현재 창에서 새로운 페이지로 이동하게 됩니다.

<a href="<https://www.example.com>" target="_self">현재 창에서 열기</a>

**target="_blank"**는 새로운 탭이나 창에서 링크를 여는 옵션입니다. 현재 페이지는 그대로 유지되며, 새로운 탭에서 링크된 페이지가 열립니다.

<a href="<https://www.example.com>" target="_blank">새 탭에서 열기</a>

사용 시 고려사항

  • target="_self" 사용: 사용자가 현재 작업 흐름을 유지해야 할 때 적합합니다.
  • target="_blank" 사용: 현재 페이지의 컨텍스트를 유지하면서 새로운 정보를 보여줘야 할 때 적합합니다.

보안을 위해 target="_blank"를 사용할 때는 항상 rel="noopener noreferrer" 속성을 함께 사용하는 것이 좋습니다.