[HTML 기초 강의] ⑧ 이미지에 링크 걸기

오늘은 이미지에 링크 거는 방법을 알아보려고 한다. 

 

 

1. 이미지에 링크 걸기

앞에서는 입력한 텍스트(=링크 이름)에 링크 걸기

<a href="URL주소"> 링크 이름 </a>

 

오늘은 이미지를 클릭하면 특정 페이지로 이동 즉 이미지에 링크 걸기

링크 이름 자리에 이미지 태그 넣기

<a href="URL 주소">URL주소"> <img src="이미지 주소"> </a>

html 태그 안에 또 다른 태그 넣기도 가능

2. img src=" "

① 메모장에  <! doctype html>과 <a href=” “> <img src=” ”> </a> 입력

 

 

② 원하는 이미지 주소 복사해서 이미지 태그에 붙여넣기

예) 구글에서 ‘독도’ 검색/ 오른 클릭 이미지 주소 복사/ 이미지 태그 따옴표 사이에 붙여넣기

 

 

3. a href=" "

③ 이미지 클릭했을 때 연결할 사이트 주소 복사/ 앵커 태그에 붙여 넣기

예) 외교부독도 사이트 주소를 복사 /앵커 시작 태그 따옴표 사이에 붙여넣기

 [HTML 기초 강의] ⑦  참조

 

 

④ 파일 이름을 [파일명. html]이라고 입력 후 저장

⑤ 저장한 html 파일을 열어 더블 클릭

 

⑥ 브라우저에서 추가한 이미지 클릭하여 연결한 사이트로 이동하는지 확인

 

⑦ 연결한 사이트로 이동!! 완료

 

 

 

 

 

네 믿음은 네 생각이 된다. 네 생각은 네 말이 된다. 네 말은 네 행동이 된다. 네 행동은 네 습관이 된다.
네 습관은 네 가치가 된다. 네 가치는 네 운명이 된다. 

-간디-