네이버 블로그나 다음 티스토리를 하다보면 이미지 그림에 링크 태그를 넣어서 원하는 웹페이지로 창이 나타나게 하고 싶을 때가 있는데 기본적으로 네이버나 티스토리에서 제공해주는 방법을 통해서 간단하게 할 수도 있고 직접 태그를 편집해서도 html 이미지 링크 태그를 만들 수도 있습니다.
블로그 html 이미지 링크 하이퍼 링크 태그 넣는 방법
블로그를 하면서 가장 기본적인 html 태그 중의 하나가 바로 이미지 태그인데 어떤 블로그를 하던지 기본적인 태그 정도는 알아두면 유용하게 사용할 수 있고 여러가지로 장점이 많습니다.
아래 인스타그램 이미지를 클릭하면 창이 새로 나타나면서 코리아배낭여행 인스타그램으로 연결되는데 이것이 바로 이미지에 링크 태그인 하이퍼링크를 연결한 것입니다.
HTML 이미지 태그 형식
블로그에 사진을 올리고 사진에 링크를 거는 방법을 이해하기 위해서는 이미지 태그에 대한 기본적인 형식을 이해해야 합니다.
HTML 이미지 기본 형식
<img src="URL(링크주소)" alt="이미지 설명글" width="이미지 가로 너비" height="이미지 세로 높이" align="center" border="0">
- src : 이미지의 웹상의 주소(위치, 경로)
- alt : 이미지 위에 마우스를 올렸을때 이미지를 설명하는 글
- height : 이미지 높이(세로)
- width : 이미지 너비(가로)
- align : 이미지 정렬 방식 3가지 (left, right, center)
- border : 이미지 테두리 두께 (0이면 테두리 없음)
HTML 이미지 태그 사용 예시
<html>
<head>
<title>HTML 이미지 링크 태그</title>
</head>
<body>
<p>코리아 배낭여행</p>
<img src="http://cfs.tistory.com/custom/blog/187/1871898/skin/images/instagram.jpg" width="60" height="60" alt="코리아배낭여행 인스타그램">
</body>
</html>
HTML 하이퍼링크 태그
하이퍼링크는 글자나 이미지(그림) 위에 마우스를 가져다 올려놓으면 손가락 모양으로 변하는데 이것을 클릭하면 지정된 웹사이트(페이지)로 연결되는 것으로 인터넷에서 가장 기본적인 속성이죠.
HTML 하이퍼링크 기본 형식
<a href="URL(링크 주소)">텍스트 또는 그림</a>
속성
- _blank : 웹 브라우저에서 새창으로 연결
- _self : 기본 속성으로 현재 있는 창에서 링크된 페이지를 보여줌
- _parent : 현재 창보다 상위 프레임 창에서 열림
- _top : 웹브라우저 창이 전체창으로 열림
이미지에 하이퍼 링크 걸기
<a href="URL" target="_blank"><img src="이미지주소"></a>
<a href="https://www.instagram.com/koreabackpacking/" target="_blank" ><img src="https://t1.daumcdn.net/cfile/tistory/2148CD33585746D414></a></p>
네이버 블로그 하이퍼 링크
네이버 블로그에서 글쓰기 화면으로 들어가서 텍스트(코리아배낭여행)에 URL 링크를 걸 수도 있으며 아래와 같이 인스타그램 이미지를 삽입하고 이미지에 URL에 적용하면 이미지에 하이퍼링크가 적용됩니다.
네이버 블로그 글쓰기 화면에서 HTML로 들어가보면 텍스트 링크와 이미지 하이퍼링크가 적용된 것을 아래와 같이 확인할 수 있습니다.
티스토리 블로그 하이퍼 링크 걸기
티스토리에서도 글쓰기 화면에서 이미지(사진)을 삽입하고 이미지에 링크를 걸기 위해서 URL에 주소를 입력하고 새창 또는 현재창을 선택하여 하이퍼 링크를 걸면되는데 네이버와 크게 다르지 않습니다.
티스토리 HTML 화면으로 들어가보면 기본적인으로 <a href="URL" target="_blank">이미지주소</a>로 되어 있는 것을 확인할 수 있습니다.
블로그에서 텍스트(글자)나 이미지(사진)에 하이퍼링크를 거는 방법은 기본적으로 네이버나 다음에서 글쓰기 화면에서 제공되고 있으며, 또는 이미지 태그나 하이퍼 링크 태그를 이용해서 사이드바에 이미지 링크를 걸 수도 있어서 블로그를 하는 사람이라면 기본적으로 알아두면 유용한 HTML 태그입니다. 그렇게 어렵지 않아서 누구나 쉽게 따라 할 수 있지 않을까 합니다.
