[HTML] HTML 기본 기능, 이미지 출력

이클립스에 이미지 저장

 

 

이클립스에 하위 폴더를 생성해 이미지를 저장해주었다.

이 이미지의 저장 경로를 통해 html 에서 불러올 것이다.

 

 

 

 

<!-- 절대경로 -->
<img src="/webApp1/img/daum.png"><br/>
<img src="/webApp1/img/naver.gif"><br/>

<!-- 상대경로 -->
<img src="../img/daum.png"></a><br/>
<img src="../img/naver.gif"></a><br/>

 

 

HTML 이미지에 스타일 넣기

<img src="../img/daum.png" width="100" height="100"><br/>
<img src="../img/naver.gif" style ="width:200px;height:200px"><br/>

 

 

HTML 이미지에 링크 넣기

<!-- 이미지에 링크 넣기 -->
<a href= "http://www.daum.net"><img src="../img/daum.png"></a><br/>
<a href = "http://www.naver.com"> <img src="../img/naver.gif"></a><br/>

 

 

총정리

<!-- 절대경로 -->
<img src="/webApp1/img/daum.png"><br/>
<img src="/webApp1/img/naver.gif"><br/>

<!-- 상대경로 -->
<a href= "http://www.daum.net"><img src="../img/daum.png" width="100" height="100"></a><br/>
<a href = "http://www.naver.com"> <img src="../img/naver.gif" style ="width:200px;height:200px"></a><br/>