[HTML] 링크 관련 태그

지난번에 알아본 이미지 만큼이나 링크도 웹 브라우저에서 많이 사용합니다. 이 블로그에 들어오는것도 링크를 통해서, 블로그에 들어와서 이 포스트에 들어온것도 전부 링크를 통해서 들어온만큼 링크는 필수적 요소입니다. 이번 포스트는 티스토리 html작성을 이용해 링크를 실제로 넣어놨으니 눌러보셔서 확인하시는 것을 추천드립니다.

 

 

<a> : 링크를 연결해주는 태그입니다. 그리고 이것이 전부입니다. 이 태그 하나로 다른 링크로 연결하거나 다운로드 하거나, 새창에서 열어주거나 하는 행동들을 할 수 있습니다. href속성을 이용해서 링크를 연결할 주소를 넣어줍니다.

사용법은 너무나 간단한것이 <a href="주소"></a>가 전부입니다.

<a href="">

링크

 

링크 태그사이에 입력한 글씨를 클릭하면 href속성에 입력한 주소로 넘어가게 됩니다. 기본값은 파랑색글씨에 밑줄이 있는 형태이며 css를 이용해서 밑줄을 없애고 색을 바꾸거나 하는 조합이 가능합니다.

또한, <a>태그 사이에 이미지를 삽입하는 <img>태그를 넣으면 이미지를 클릭할 시 링크로 넘어가게 하는 것도 가능합니다.

<a> <img>

눌러보세요!

---

저는 웹 서핑을 하면서 특정 링크를 열어야 하는 경우에 새창에서 열기를 선호하는 편입니다. 클릭만으로 새창에서 열리는 경우도 있지만 그렇지 않은 경우가 많은데요, 이것 또한 속성을 통해 설정이 가능합니다.

 

target속성 : 새창에서 열기를 할 때 사용하는 속성입니다. 속성값들을 통해 현재 페이지에서 열지 새창에서 열지를 결정합니다.

target속성

현재 페이지에서 열기 | 새 창에서 열기

---

온라인 위키나 API문서들을 보다보면 내용이 긴 경우 어떤 링크를 클릭했을때 문서의 특정위치로 보내주는 것을 보신적이 있을 겁니다. 이런 기능을 '앵커(anchor)'라고 부르며 이 기능의 구현 또한 가능합니다.

사용법은 처음에 배운 href속성을 이용합니다.

앵커기능

태그를 적고 그 태그에 id속성에 앵커의 이름을 지정해줍니다. id속성은 간단히 말하면 그 태그의 별명입니다. id속성은 이름이 모두 달라야하며 이를 통해 해당 태그를 구분하는 일종의 이름표입니다. 그리고 앵커를 연결하기 위해 href속성에 링크주소대신 #을 붙이고 앵커의 이름을 적어주시면 앵커 기능이 작동하게 됩니다.

맨위로