a 태그란

Dave·2023년 9월 27일

HTML, CSS

목록 보기

2/6

출처
MDN - a tag
Do it! HTML5 + CSS3 웹 표준의 정석

1. 용도

웹 사이트 내에서 다른 페이지, 같은 페이지 내의 특정 위치, 그 외 다른 웹 사이트 URL로 연결할 수 있는 하이퍼링크를 만드는 데 사용한다.

2. a 태그에 사용되는 어트리뷰트들

2-1. href

링크한 문서나 사이트의 주소를 입력하여 해당 위치, 주소로 이동하게 해준다.

<a href="프로젝트 내 상대 주소"></a>
<a href="타 웹 사이트의 URL"></a>

같은 페이지 내에서 위치를 이동할 때는 이동하고 싶은 위치의 요소에 id 선택자를 부여한 다음에, href 어트리뷰트의 값을 해당 id 선택자 문법을 입력해준다.

<태그 id="id1"></태그>
<a href="#id1"></a>

사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 만들 떄는 mailto: 를 이메일 주소 앞에 붙여준다.

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

전화번호를 사용하는 프로그램과 연동할 때는 tel: 을 전화번호 앞에 붙여준다.

<a href="tel:+49.157.0156">+49 157 0156</a>

2-2. target

링크한 내용을 현재 창에 띄울지, 새 창에 띄울지 지정한다.

1) 속성 값 : _blank

새 창이나 새 탭에서 열고 싶을 때 사용

보안을 위한 rel 어트리뷰트 사용

출처
MDN - rel="noopener"
About rel=noopener

rel 어트리뷰트는 현재 문서와 링크한 문서와의 관계를 알려준다.

rel 어트리뷰트 값을 noopener noreferrer로 설정함으로써 새로운 탭 혹은 창에서 열린 페이지가 링크를 클릭한 페이지에 대한 접근 권한을 가지지 못하게 한다.

하지만 현재의 대부분의 브라우저에서는 _blank 값을 줬을 경우 rel="noopener" 어트리뷰트를 암묵적으로 설정해준다.

2) 속성 값 : _self

기본값으로, 현재 화면에서 열린다.

3. a 태그 초기화하기

a 태그는 기본적으로 밑줄이 있는 파란색 글자로 표시되기 때문에 밑줄을 없애주고

a {
  text-decoration: none; /* 밑줄 제거 */
  color: 원하는 색상; /* 초기화할 색상이 있는 경우 명시해주거나 */
  color: inherit; /* 마땅히 없다면 상위 요소의 색상을 그대로 상속하게 설정한다. */
}

/* 마우스를 링크 위에 올린 상태 */
a:hover{
	color: 원하는 색상;
}

/* 마우스로 클릭한 상태 */
a:active{
	color: 원하는 색상;
}

/* 링크를 클릭해서 다른 페이지를 방문 후 상태*/
a:visited{
	color: 원하는 색상;
}