[HTML] <a> 태그

<a> 태그란?

• 하이퍼링크를 생성하는 인라인 요소
• 클릭하면 href 속성에 지정한 주소로 이동한다.
• 혹은 다른 페이지, 파일, 이메일, 전화번호 등으로 이동할 수 있다.
• download 속성을 추가하면 파일 다운로드 설정도 가능하다.

<a href="https://min1119-story.tistory.com/">주소를 지정하여 이동</a>
<a href="mailto:alsruddl1119@naver.com">이메일 전송</a>

---

새 창에서 보기

• 기본적으로 target="_self" 라는 현재의 탭에서 보기라는 속성이 생략되어 있다. 
• target="_blank"를 사용하면 새 창에서 해당 링크를 열 수 있다.
• 보안상 rel="noopener noreferrer"를 추가하는 것이 권장된다.
  • no opener(노오프너) - 링크를 건 페이지를 참조할 수 없게 되며, 링크된 페이지와 링크를 건 페이지가 별개의 프로세스 취급된다.
  • no referrer(노리퍼러) - 다른 페이지로 이동 시, 링크를 건 페이지의 주소 등의 정보를 Referer:HTTP 헤더의 리퍼러로서 송신하지 않는다.

<a href="" target="_blank" rel="noopener noreferrer">새 창으로 보기</a>

---

id로 특정 위치로 이동

• id 사용을 통해 같은 페이지 안의 특정 위치로 이동할 수 있다.

<a href="#section2">2번째 섹션으로 이동</a>

<h2 id="section1">1번째 섹션입니다.</h2>
...
<h2 id="section2">2번째 섹션입니다.</h2>

---

 

버튼 스타일 <a> 태그

• style 정의와 class 를 이용하여 <a> 태그를 버튼처럼 만들 수 있다.
• text-decoration: none; 설정 시 밑줄 제거 가능

<style>
    .button {
        display: inline-block;
        padding: 10px 20px;
        background-color: blue;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }
</style>

<a href="" class="button">버튼 스타일 링크</a>

---

태그 관련 글 바로가기 모음

[HTML] <div> 태그

[HTML] <p> 태그

[HTML] <a> 태그