[HTML 기초] a태그 (anchor 태그)

삐개·2022년 1월 4일
0

링크

HTML에서 링크의 역할은 외부 페이지, 또는 다른 컨텐츠로 이동 시켜주는 역할을 합니다.
HTML 기초 부분에서 설명드렸던 하이퍼텍스트, 하이퍼링크가 이에 해당합니다.
구글 검색에서 파란 글씨에 밑줄이 그어져있거나, 클릭하면 새 페이지가 열리는 경우도 마찬가지입니다.
이런 기능을 담당하는 태그가 바로 a태그입니다.

a태그 (anchor tag)

작성예시

<a href="https://www.google.com/" target="_blank">Google!</a>

결과 (글씨 클릭시 구글 검색창 열림)

Google!

a태그, 또는 앵커태그는 하이퍼링크를 연결할 수 있는 태그입니다. 주로 서브페이지, 외부링크, 파일 제공 등에 사용합니다.

필수 속성

이 태그에는 필수 속성이 존재합니다. 위의 예시에서 href="링크"부분에 해당됩니다. 이 속성이 없다면 a태그가 작동하지 않습니다.
href속성은 클릭시 이동하고 싶은 링크 주소를 넣어주면 됩니다.
target속성은 필수 속성은 아닙니다.
대신 내가 새 페이지를 어떻게 열 지를 설정할 수 있습니다.
속성값으로는 _self _blank _parent _top 등이 있습니다.

각 속성의 결과 값을 정리하면 아래와 같습니다.

_self: 현재 페이지에서 열기
_blank: 새 탭에서 열기
_parent: 부모 페이지에서 열기
_top : 최상위 페이지에서 열기

*부모페이지는 A라는 창에서 팝업이나 하이퍼링크등으로 B창을 열었을 때, A는 B의 부모페이지가 됩니다.

이외에도 download rel 등의 속성이 있으나 자주 사용하지는 않습니다.

기본 스타일

a태그는 css 작업을 하지 않아도 기본 속성(스타일)이 부여되어 있습니다.
기본적으로 밑줄이 그어져있고, 파란색으로 표시됩니다.

예시

(velog에서는 링크가 녹색으로, 밑줄 없이 표시됩니다)
기본 스타일은 단순한 스타일이므로, css 초기화를 통해 커스터마이징하거나 스타일 제거를 할 수 있습니다.

초기화에 대해서는 나중에 다뤄보도록 하겠습니다.

profile
병아리 개발자

0개의 댓글