본문 바로가기
TIL/HTML

a 태그와 속성들

by 계발자jessie 2023. 7. 13.
반응형

<a> 태그란?

<a> 태그에서 a 는 anchor를 뜻한다. anchor는 닻이라는 뜻이다. <a> 태그는 link를 생각하면 되고 해당 태그를 통해 다른 웹사이트로 이동할 수 있게 된다. 

 

<a> 태그의 사용

<a> 태그는 다음과 같이 사용할 수 있다.

<a>Go to google.com</a>

이렇게 하면 아래와 같은 문구를 확인할 수 있다.

 

하지만 위의 문구를 누르면 아무런 반응도 일어나지 않는다. <a> 태그는 <h1> 등의 title을 뜻하는 태그와 달리 부가적인 정보를 필요로 한다. 이런 부가적인 정보는 attributes(속성)이라고 한다. 속성은 태그의 이름을 작성한 후 띄어쓰기를 해 주고 추가하는 형태로 그러한 속성 중 하나가 바로 "href" 이다. 

 

href 속성

<a> 태그의 중요한 속성 중 하나인 href는 "HTTP reference" 혹은 "hyperlink reference" 라고 한다. 이 속성은 어디로 이동하는지 <a> 태그에 알려주는 역할을 한다. 

<a href="https://www.google.com/">Go to google.com</a>

<a> 태그에 href 속성을 추가해서 작성해주었다. href 에는 이동하고자 하는 웹사이트의 url을 적어주면 된다. 위와 같이 href 속성을 부여해주고 난 후의 상황은 아래와 같다.

 

위에서와 달리 밑줄이 그어진 문구로 출력이 된다. 클릭을 하게 되면 google 사이트로 이동하는 모습을 확인할 수 있다.  

 

target 속성

<a> 태그에는 href 속성 외에 target 이라는 속성도 있다. target 속성에는 "_self" 라는 기본값이 존재한다. 

<a href="https://www.google.com/" target="_self">Go to google.com</a>

_self 값을 이용할 경우 해당 태그가 클릭된 페이지가 google 페이지로 이동하게 된다. target 속성에는 다른 값도 줄 수 있다. 그 중 하나가 바로 "_blank"이다. target 속성에 _blank 값을 주게 되면 링크를 클릭하면 새로운 탭으로 해당 웹사이트가 열리는 것을 확인할 수 있다. 

반응형

댓글