자바 웹 프로그래밍

준비중..

자바 웹 프로그래밍

나만의 웹사이트를 만들어 보자!

03 HTML: 이미지와 링크

# 웹 페이지를 만들다: 이미지와 링크 웹 페이지에 글자만 있으니 좀 심심하지 않은가? 이번에는 이미지와 링크연결하는 법에 대해 알아보자. ## 학습목표 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 태그: 페이지 이동 링크 생성.