[HTML]이미지에 링크 걸기 & 이미지 삽입

HTML 코딩을 할 때 어떠한 글을 누르거나 이미지를 클릭하면 다른 화면으로 넘어가는 게 일상에서 너무 많이 사용해서 그런가 그런가 보다! 했는데, 배우고 나니 신기했습니다!ㅋ 글을 누르면 내가 만든 혹은 누군가가 만든 다른 영역으로 넘어간다는 게... 생각해보면 신기해요!! (강요! 강요!ㅋ)

그런데 신기한 만큼 어렵지는 않습니다!ㅋ 비전공자도 누구나 따라 할 수 있을 만큼 쉽습니다!ㅎ

 

---

HTML 이미지 링크 삽입하는 방법

우선 HTML 이미지 링크를 걸기 위해서 2가지 태그가 필요합니다.

1. <a href></a> = 해당 주소로 이동할 수 있도록 만들어주는 태그

2. <img> = 이미지를 넣을 수 있도록 만드는 태그

형식은

<a href="이동할 주소"><img src="이미지 주소"></a> 이렇습니다.

"이동할 주소"에 누르면 이동 '될' 주소를 넣어주고, "이미지 주소"에는 '넣고 싶은' 이미지를 넣어주면 됩니다.

이미지를  넣는 방법

https://skyblue606.tistory.com/14

[HTML]이미지 넣는 방법&이미지 크기 변경

---

HTML 이미지 링크를 위해 알아야 할 태그

• href : 연결하고자 하는 url 주소

• Target : _blank, _self, _parent, _top

Target은 이동할 창을 어떤 방법으로 열어 줄 것인가 하는 태그입니다. 

인터넷을 사용하다가 검색을 할 때, 새창으로 열리지 않는 것은 애초에 속성 태그가 블랭크로 적용되지 않았기 때문입니다. 기본 폴트는 _self로 되어 있습니다.

그 외의 태그들로

• _blank : 웹 브라우저에서 새창으로 열기

• _self : 기본 속성으로 현재 있는 창에서 연결

• _parent : 현재 창보다 상위 창에서 연결

• _top : 웹 브라우저 창에서 전체 창으로 연결

---

그 외 태그의 정의

• src : 이미지의 웹상 url

• alt : 이미지를 오버 시, 이미지가 안 보일 때 설명 대체하는 글

• height : 이미지의 높이 값 (세로)

• width : 이미지의 너비 값 (가로)

• align : 이미지 정렬 (left, center, right)

• border : 이미지 테두리

이미지를 삽입하는 방법과 그 이미지 or 글을 누르면 url을 타고 이동하는 방법에 대해서 적어봤습니다. 어렵지 않고 재미있는데, 막상 혼자서 하려면 마음같이 안 되는 신기한 현상이네요..ㅎ