# 웹 페이지를 만들다: 이미지와 링크
웹 페이지에 글자만 있으니 좀 심심하지 않은가? 이번에는 이미지와 링크연결하는 법에 대해 알아보자.
## 학습목표
1. 이미지 삽입하기
2. 다른 페이지로 이동하기
## img 태그
`<img>` 태그는 이미지를 보여준다. 먼저 페이지부터 확인하자.
![Imgur](https://i.imgur.com/VIRPqP4.png)
위 페이지의 이미지 추가 코드는 아래와 같다.
```
<!-- 단일 태그: 하나의 태그를 열음과 동시에 닫음 -->
<img src="http://goo.gl/KvPJDd" />
```
이미지 태그의 url 주소를 src 속성값으로 대입한다. 여기서 새로운건 이미지 태그는 **단일 태그**라는점 기억하자.
## a 태그
`<a>`태그는 다른 페이지로 이동하는 링크를 만들 수 있다. 아래 페이지에서 맥도날드를 클릭하면 홈페이지로 이동하게 된다.
![Imgur](https://i.imgur.com/8ssa5Qk.png)
링크를 거는 코드는 아래와 같다.
```
<a href="http://www.mcdonalds.co.kr/">맥도날드</a>
```
a 태그의 href 속성값으로 이동할 페이지의 url을 적어준다.
## 실습
맥도날드 마크를 클릭하면 맥도날드 홈페이지로, 켄터키 할아버지를 클릭하면 KFC 홈페이지로 이동하는 페이지를 만들어보자.
![Imgur](https://i.imgur.com/xtPY1RN.png)
정답확인: https://jsfiddle.net/sehongpark/6xpes1kL/
## 요약
1. img 태그: 이미지를 불러옴.
2. a 태그: 페이지 이동 링크 생성.