다른 사이트 : http://www.homejjang.com/03/html.php/img_align.php
출처 : http://reubwe.tistory.com/entry/%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%A0%95%EB%A0%AC
이미지를 배치할 때 글자의 위치를 이미지와 연관시켜 배치시킬 수 있다.
'ALIGN=속성'이라는 것을 추가해 주면 된다.
즉,이미지가 글자를 중심으로 볼 때 오른쪽에 위치한다든가 혹은 그림을 중심으로 볼 때 글자들이 그림의 오른쪽 부분에 맨 윗부분부터 차례로 나열된다든가 하는 등 이미지와 글자와의 관계를 정의내려 준다.
다른 태그들과는 달리 따옴표가 적용되지 않으므로 주의해야 한다.
이미지를 중심으로 텍스트를 배치할 경우
<IMG SRC="image.gif" ALIGN=align>
align=top,middle,bottom
| | top | -글자를 이미지의 가장 윗부분에 정렬시킨다. | | middle | -글자를 이미지의 중앙선에 정렬시킨다. | | bottom | -글자를 이미지의 가장 밑부분에 정렬시킨다. |
|
ALIGN옵션을 사용하지 않았을 때에는 초기값으로 ALIGN=bottom옵션을 사용한 것과 같은 결과을 보게 된다.
그리고 문장이 한줄을 넘어 갈 경우,자동적으로 이미지 밑으로 위치하게 된다는 것에 주의해야 한다.
| <IMG SRC="aaa.gif" ALIGN=TOP>나우깨비<br>
<IMG SRC="aaa.gif" ALIGN=MIDDLE>나우깨비<br>
<IMG SRC="aaa.gif" ALIGN=BOTTOM>나우깨비<br>
|
| |
출처 : http://church.catholic.or.kr/sapa/hanaro/htmlguide/ss01/ss01l.html
글자를 중심으로 이미지를 배치할 경우
<IMG SRC="image.gif" ALIGN=align>
align=left,right,center
| | left | -이미지를 글자의 왼쪽에 정렬한다. | | right | -이미지를 글자의 오른쪽에 정렬한다. | | center | -이미지를 문서의 가운데로 정렬한다. |
|
| <IMG SRC="aaa.gif" ALIGN=left>
<IMG SRC="aaa.gif" ALIGN=right>나우깨비 |
| |
TEXT와 이미지를 혼합배치하기
<IMG SRC="aaa.gif" ALIGN=left VALIGN=TOP>
네스케이프 3.0의 경우 그래픽 이미지의 크기가 클 경우 그 주위에 글자들을 한 줄이 아닌 여러 줄로 표현하는 기능을 갖고 있다.
즉 위의 두 속성들을 다 사용함으로써 이미지를 왼쪽에 TEXT를 이미지의 오른쪽 맨 윗부분에 위치시킨다.
| | <IMG SRC="aaa.gif" ALIGN=left VALIGN=top>인터넷이 우리의 생활 깊숙히 들어옴에 따라서 우리의 생활에 많은 변화가 일어났다. |
| |
<BR CLEAR=ALL>
이미지에 붙는 문서가 아님을 선언한다.
| <IMG SRC="aaa.gif" ALIGN=left>인터넷처럼 빨리 변하는 것은<BR>
없을 것이다.<BR CLEAR= ALL>
어제까지만 해도 존재했던 사이트가<BR>
오늘은 없어지고 없다. |
| |
