< 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> 태그 안에 들어갈 수 있는 속성들에 대해 얘기해보겠습니다.

 

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이 하는 역할입니다.

 

이해가 되시죠??

 

이제 오늘 다룬 내용들을 최종 정리해보겠습니다.

<a>는 다른 URL로의 하이퍼링크를 만들 때 사용하는 태그입니다.

<a> 태그 안에는 다양한 속성이 존재하는데

href는 이동하려는 URL을 지정해주는 속성

target은 URL을 어느 탭에 표시할지를 알려주는 속성

title은 이동하려는 URL에 관한 간단한 설명을 작성하는 속성입니다.

---

어때요?

이제 여러분도 HTML 파일에

다른 URL로 이동할 수 있는 하이퍼링크를 삽입할 수 있게 되었습니다.

짝짝짝👏

다음 장에서는 리스트와 관련된 태그에 대해 다뤄보도록 하겠습니다.

그럼 다음 장에서 뵙겠습니다!

안녀어어엉~~~~~