[HTML] a 태그

728x90

목 차

• 0. 요약
• 1. 기본 구조
• 2. 주요 속성
• 2-1. href
• 2-2. target
• 2-3. rel
• 2-4. download
• 2-5. title
• 2-6. href="#" 또는 href="javascript:void(0)"
• 2-7. 스타일링

반응형

 

0. 요약

• <a> 태그는 링크를 만들기 위한 HTML 요소입니다.
• href 속성은 링크의 목적지를 정의합니다.
• 다른 속성들(target, rel, download, title)을 활용하여 링크 동작을 세밀하게 조정할 수 있습니다.

 

1. 기본 구조

• HTML의 <a> 태그는 "앵커(anchor)" 태그라고 하며, 웹 페이지에서 다른 문서나 외부 리소스에 링크를 제공하는 데 사용됩니다. 기본적으로 하이퍼링크를 생성하는 태그입니다.
• href: 사용자가 클릭했을 때 이동할 URL(목적지)을 정의하는 속성입니다. 웹 페이지나 파일, 이메일 주소 등으로 연결할 수 있습니다.

<a href="https://spirit0833.tistory.com">링크 텍스트</a>

 

2. 주요 속성

2-1. href : 하이퍼링크가 가리키는 목적지(URL)를 정의합니다.

<a href="https://spirit0833.tistory.com">Example</a>

 

 

2-2. target : 링크를 클릭했을 때 열리는 방법을 지정합니다.

• _self: (기본값) 현재 창에서 링크가 열림
• _blank: 새 창이나 새 탭에서 링크가 열림
• _parent: 부모 프레임에서 링크가 열림
• _top: 최상위 창에서 링크가 열림

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

 

 

2-3. rel : 링크와의 관계를 나타내는 속성으로, 주로 보안이나 SEO 관련 이유로 사용됩니다. 특히 target="_blank"와 함께 사용할 때는 noopener noreferrer를 자주 사용합니다.

<a href="https://spirit0833.tistory.com" target="_blank" rel="noopener noreferrer">링크</a>

 

 

2-4. download : 링크된 파일을 클릭하면 자동으로 다운로드되도록 합니다. 브라우저가 지원하는 파일 형식에 한해서만 작동합니다.

<a href="file.pdf" download="newfile.pdf">파일 다운로드</a>

 

 

2-5. title : 링크에 마우스를 올렸을 때 나타나는 툴팁(도움말)을 정의합니다.

<a href="https://spirit0833.tistory.com" title="예제 사이트">Example</a>

 

 

2-6. href="#" 또는 href="javascript:void(0)" : 링크의 기본 동작(페이지 이동)을 막고 클릭 이벤트 등 다른 동작만 실행하고 싶을 때 사용됩니다.

<a href="javascript:void(0)" onclick="alert('클릭!')">클릭하세요</a>

 

 

2-7. 스타일링 

• 기본적으로 <a> 태그는 브라우저에서 파란색 글자와 밑줄로 표시됩니다. CSS를 사용해 스타일을 변경할 수 있습니다.
• color : 글자색을 변경할 수 있습니다.
• text-decoration : 밑줄을 없앨 수 있습니다. (none으로 설정)

<a href="https://spirit0833.tistory.com" style="color: red; text-decoration: none;">스타일링된 링크</a>