HTML기초 이미지에 링크 걸기 방법

HTML기초 이미지에 링크 거는 방법에 대해서 알아보려고 합니다. 이미지에 링크를 거는 방법은 일반 글자에 링크를 만드는 방법과 비슷한데요. 우리가 네이버나, 다음 등 메인페이지로 이동 할 때 이미지를 클릭하면 메인페이지로 가는 원리와 같은 것입니다. 태그 내에서 글자라고 생각하고 링크 태그로 묶어주면 되는데요.

 

이미지에 링크를 만드는 방법과 텍스트에 링크를 만드는 방법 두가지에 대해서 살펴보겠습니다.

 

이미지에 링크를 거는 태그의 기본은 <a href="링크주소"> <img src="이미지파일"> </a> 입니다. <img src="이미지파일">만 빼고 텍스트를 넣으면 텍스트 하이퍼링크가 되는 것입니다. 어때요 간단하지 않나요? 부가적으로 이미지의 위치에 따라서 링크를 다르게 설정할 수 있는데 좌표도 알아야하고 조금 더 복잡하기 때문에 추후에 포스팅 하도록 하겠습니다.

 

아래의 이미지를 보고 공부해 보겠습니다.

 

눈썹있는 모나리사 : 무엇이든 알아가는 것을 좋아하고 습득한 지식은 사람들과 함께 공유합니다.

강에서 당신이 손을 담가 만지는 물은 흘러가는 마지막 물이자 다가오는 첫 물이다. 지금 이 시간이 바로 그렇다 - 레오나르도 다빈치

@ 세상의 모든 지식을 함께 공유하고 알아가는 곳 @

@ 진솔한 생각을 적어가는 곳 @

 

▼ HTML 편집기 노트++에서 작성한 내용입니다. 아래와 같이 <a href=""> <img src=""> </a> 의 형식으로 링크태그로 이미지를 감싸안아주면 이미지에 링크가 걸립니다. href 의 위치는 네이버로 해 보았습니다.

 

 

▼ 아래의 마우스 커서가 보이지 않지만 이미지를 클릭하면 네이버로 가게 만들어 보았습니다.

 

 

▼ 클릭한 결과 아래와 같이 네이버 홈페이지가 나옵니다.

 

 

▼ 이번에는 이미지와 함께 네이버 글자를 링크를 걸어보도록 하겠습니다. <img src=""> 대신 글자를 넣었습니다.

 

 

▼ 아래와 같이 출력되었습니다. 네이버 글자를 이미지와 단락구분을 하지 않아서 바로 옆에 오게 되었습니다. 단락을 구분하고 싶다면 <p> 태그를 이용하면 되겠습니다.

 

간단하게 이미지 링크 거는 방법에 대해서 알아보았습니다. 이미지에 링크를 거는 방법은 매우 쉽지만 세부사항으로 들어가서 위치에 따라서 다른 링크를 거는 방법도 있습니다. 이런 부분은 좌표도 알아야하고 복잡한 부분이 있기 때문에 조금 더 공부하고 포스팅하겠습니다. 이해는 했지만 실제 해보려하면 쉽지는 않더라고요. 차분하게 천천히 따라 해보아야겠습니다.

 

HTML기초, 기초지식과 이미지 삽입하기

HTML기초, 기초태그 제목태그 배우기

HTML기초, 이미지 크기 조절 및 정렬

HTML기초, 순서와 목록을 만드는 태그

HTML기초 테이블 태그로 표 만들기 방법

HTML기초 테이블 태그로 표 만들고 셀 합병하기