ProgrammingHTML

HTML 이미지 링크거는 법

html 링크, html 링크걸기, html 이미지, html 이미지 링크, 이미지 링크걸기

HTML 이미지 링크거는 법

HTML에서 이미지를 누르면 링크가 연결되는 것을 배워 봅시다! 아주 아주 간단합니다.
결과만 보고 싶으신 분들은 이 포스트의 맨 마지막을 확인하세요.


HTML 이미지 기본 형식

HTML에서는 <img>태그를 이용해 이미지를 삽입 할 수 있습니다.

1
2
<img src="http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg"
alt="카카오 라이언" width="100" height="50" align="center" border="0">

실행 결과

  • src : 이미지의 웹상의 주소
  • alt : 이미지 위에 마우스를 올렸을때 설명 글, 이미지가 보이지 않을 떄 설명
  • height : 이미지의 높이 설정 (세로 크기)
  • width : 이미지의 너비 설정 (가로 크기)
  • align : 이미지 정렬방식 (left, center, right)
  • border : 이미지 테두리 두께 (0이면 테두리가 없습니다.)

HTML 링크 기본 형식

링크를 연결할때 사용하는 <a> 태그를 알아봅시다. 하이퍼 링크라고도 불립니다. 기본적으로 <a>태그는 파란색으로 나타납니다.

1
<a href="https://dullyshin.github.io/" target="_blank">HYEJIN IT BLOG<a>

HYEJIN IT BLOG

  • href : 연결 하고자 하는 주소
  • target
    • _blank :웹 브라우저에서 새 창으로 연결 됩니다.
    • _self : default 기본 속성으로 현재 있는 창에서 연결됩니다.
    • _parent : 현재 창보다 상위 프레임 창에서 연결됩니다.
    • _top : 웹 브라우저 창이 전체 창으로 연결됩니다.

HTML 이미지 링크거는 법

위에서 배운 2가지의 링크를 종합하여 HTML 이미지 링크거실 수 있습니다. <a>태그 안에 <img>태그를 합쳐서 사용합니다.

1
2
3
<a href="https://dullyshin.github.io/" height="5" width="10" target="_blank">
	<img src="\images\logo.png" alt="위의 이미지를 누르면 연결됩니다.">
<a>

위의 이미지를 누르면 연결됩니다.

아주 간단합니다. 문제 해결되길 바랄께요! 궁금하신 점 있다면 댓글 남겨주세요.

Share