< html 공부 > 8장. HTML의 태그 (6) - a
이번 장에서는 <a>라는 태그에 대해 다뤄보도록 하겠습니다!
◈ <a>
-> 앵커라고 불리며, 다른 URL로의 하이퍼링크를 만들 때 사용하는 태그
기본 구조 : <a ~></a>
a, 앵커라고 불리는 태그는 다른 URL로 이동할 수 있게끔 해주는 태그입니다.
예를 들어, 제 블로그 메인 화면으로 이동하고 싶을 때,
introducing-turtle.tistory.com/ 를 클릭하면 바로 이동할 수 있는 것처럼요!
이해가 되시나요?
여러분의 이해를 조금이나마 더 편하게 하기 위해, 예시를 통해 설명해드리겠습니다!
See the Pen JjbmRLP by JaeyongLee (@jaeyonglee960212) on CodePen.
위의 링크를 클릭하시면, 새로운 창을 통해 제 블로그 메인 화면으로 이동할 수 있는 것을 확인할 수 있으실 것입니다!
자 이제 위의 코드를 보며 <a> 태그 안에 들어갈 수 있는 속성들에 대해 얘기해보겠습니다.
첫 번째는 바로 href입니다.
href : 이동하고자 하는 URL을 지정해주는 속성
href는 URL을 지정해주는 속성을 가지고 있습니다.
위의 코드를 보시면 아시겠지만, href= 옆에 제 블로그 주소가 적혀있고
소개하는 거북이를 클릭하면 제 블로그로 이동하게 되는 걸 보실 수 있으실 것입니다.
즉, href를 통해 제 블로그로 이어지는 링크를 만들어준 것입니다.
두 번째 속성은 target입니다.
target : URL을 표시할 위치를 지정해주는 속성
※ target의 종류 ※
- _self : URL을 지금 보고 있는 현재 탭에 표시합니다 (기본값)
- _blank : URL을 지금 보고 있는 탭이 아닌 새로운 탭을 통해 표시합니다.
- _parent : URL을 현재 탭의 부모에 표시합니다. 만약 부모가 없다면, 기본값으로 표시합니다.
- _top : URL을 최상단 탭에 표시합니다. 만약 부모가 없다면, 기본값으로 표시합니다.
target이 조금은 이해가 가시나요?
위의 코드에서는 _blank 속성을 사용했기 때문에 소개하는 거북이를 클릭하면,
새 탭을 통해 제 블로그 메인 화면이 표시됩니다.
하지만, 위의 다른 종류들을 적용하면 종류별 특징에 맞게 URL이 표시되는 것입니다.
마지막으로 다룰 속성은 title입니다.
title : 이동하려는 URL에 관한 간단한 설명을 추가해주는 속성
title의 경우 태그라고 생각하시면 좋을 것 같습니다.
여기서 제가 얘기한 태그는 html에서 다루는 태그가 아닌
꼬리표의 의미를 가진 태그를 얘기하는 것입니다.
위의 소개하는 거북이 위에 마우스 커서를 한 번 올려보세요!
그럼 아마 소개하는 거북이 블로그입니다.라는 문구가 뜰 것입니다.
이게 바로 title이 하는 역할입니다.
이해가 되시죠??
이제 오늘 다룬 내용들을 최종 정리해보겠습니다.