기본 태그 - 이미지 불러오기와 정렬

 

기본적인 이미지 불러오기 (여러가지 경우의 상대경로, 절대경로)

<img src="">
따옴표 안에 이미지 파일의 경로를 넣어준다.

<img src="" width=200 height=200>
절대 크기를 지정할 수 있다.

<img src="" width=200 height=200 title="해파리">
이미지 위에 마우스 포인터를 올려두었을 때 사용자가 입력한 설명이 말풍선으로 나타난다.

 

 

 

상대경로로 이미지 불러오기

(1) 같은 폴더 안에 있는 이미지 불러오기 : <img src="Jellyfish.jpg">

(2) 하위 폴더 안에 있는 이미지 불러오기 : <img src="img/Jellyfish.jpg">

(3) 상위 폴더 안에 있는 이미지 불러오기 : <img src="../Jellyfish.jpg">

 

 

 

절대경로로 이미지 불러오기 

절대 경로로 배포할 경우 개발 환경과 운영 환경이 달라 여러가지 문제가 발생할 수 있다.

 

<img src ="C:\Users\User\eclipse-workspace\javaproject\web\WebContent\HTML\work\img">

 

 

 

 

 

 

 

이미지 정렬하여 불러오기 (align=left, center, right), (p align), (left, center, right)

 

<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left>

<!-- 가운데정렬  --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=center>

<!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>

 

문자를 정렬할 때 처럼 정렬이 될 줄 알았는데

center 배치가 제대로 안됐다.

 

 

 

align 만으로는 이미지를 의도한대로 배치하기가 힘들다.

이 때, <p> 태그를 사용해 본다.

<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left>

<!-- 가운데정렬  --><br><br><br><br>
<p align=center><img src="img/Jellyfish.jpg" width=150 height=150></p>

<!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>

 

 

 

또 다른 방법으로 <center></center>로 이미지 소스를 감싼다.

 

<!-- 왼쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=left>
<!-- 가운데정렬  --><br><br><br><br>
<p align=center><img src="img/Jellyfish.jpg" width=150 height=150></p>
<center><img src="img/Jellyfish.jpg" width=150 height=150></center>
<!-- 오른쪽정렬 --><br><br><br><br>
<img src="img/Jellyfish.jpg" width=150 height=150 align=right>

 

 

 

 

 

이미지와 텍스트를 함께 출력 (align=top, middle, bottom)

 

아무것도 입력하지 않았을때의 기본값은 bottom이다.

<img src="img/Desert.jpg" widgh=150 height=150>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=top>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=middle>사막이미지<br><br>
<img src="img/Desert.jpg" widgh=150 height=150 align=bottom>사막이미지<br><br>