<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 값을 주게 되면 링크를 클릭하면 새로운 탭으로 해당 웹사이트가 열리는 것을 확인할 수 있다.
'TIL > HTML' 카테고리의 다른 글
의미는 없지만 기능은 존재하는 태그들 (0) | 2023.07.18 |
---|---|
input 태그와 함께하는 label 태그 (0) | 2023.07.17 |
input 태그의 여러 속성들 (0) | 2023.07.16 |
html 파일의 작성 규칙과 head (0) | 2023.07.15 |
img 태그와 src 속성 (0) | 2023.07.14 |
순서가 있는 목록, 순서가 없는 목록 만들기 (0) | 2023.07.11 |
댓글