[HTML #2] 속성 과 링크 a, href="" target="_blank"

이 번에는 HTML의 속성이라는 문법과 링크라는 가장 중요한 두 가지 기능을 어떤식으로 표현할 수 있는지 알아보도록 하겠습니다.

HTML 속성 및 링크

하이퍼링크로 지정된 텍스트를 클릭하면 특정한 웹사이트로 이동하게 되는 속성을 사용하고 링크로 연결시킬 수 있습니다.

 

여기서 <a>라는 태그를 먼저 알 아야 합니다. A는 Anchor이라는 약자입니다. 즉, 어떠한 문자가 링크에 Anchor(고정, 연결) 되어 있다는 의미로 사용된 것으로 보입니다. 

 

그렇다면 이 <a> 태그를 어떻게 사용할 까요?

Href

See the Pen Untitled by 서근 (@seogun95) on CodePen.

전 게시글에서도 말했듯, <a> 태그에 href 속성을 통해 링크를 페어링 시켜줄 수 있습니다.

 

<a> 태그만으로는 정보가 부족하다고 HTML이 판단하고 아무런 기능을 제공하지 않지만, href라는 속성을 통해 링크를 넣어주게 되면 해당 텍스트가 링크로 전환되게 되는 방식입니다.

Target

만약, 새 탭으로 열게 해주고 싶다면 어떻게 할까요?

 

<a> 태그는 기본적으로 해당 탭에서 열리게 되어있습니다. 하지만, target을 blank로 지정해주게 된다면 새 탭에서 해당 링크가 열리게 되는 것을 확인할 수 있습니다. 

 

태그는 target="_blank"라고 <a> 태그 안에 넣어주기만 하면 됩니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

Title

하이퍼 링크를 Rollover 즉, 커서를 올려놓았을 때 대략적인 정보를 나타내게 해 줄 수 도 있습니다.

See the Pen Untitled by 서근 (@seogun95) on CodePen.

---

오늘은 이렇게 HTML의 속성이라는 문법과 링크라는 가장 중요한 두 가지 기능을 어떤 식으로 표현할 수 있는지 알아보았습니다.

 

 

읽어주셔서 감사합니다🤟