본문 바로가기
www/HTML tip

image - 이미지 정렬(align)

by 랭님 2014. 1. 1.
이미지 정렬(align)

HTML문서에 이미지를 삽입하면 기본적으로 아래와 같이 정렬됩니다.

<img src="totoro_200_150.jpg">이미지 정렬

이미지 정렬

<img>태그에 align 속성을 사용하면 이미지와 텍스트의 배치를 바꿀 수 있습니다.

<p><img src="totoro_200_150.jpg" align="top">align="top"</p>
<p><img src="totoro_200_150.jpg" align="middle">align="middle"</p>
<p><img src="totoro_200_150.jpg" align="bottom">align="bottom"</p>

align="top"

align="middle"

align="bottom"

이미지와 텍스트의 자연스러운 배치를 위해서 많이 사용하는 align 속성값은 left와 right입니다.

<p><img src="totoro_200_150.jpg" align="left">수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다.</p>

<p><img src="totoro_200_150.jpg" align="right">수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다.</p>

수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다.

수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다.

이미지와 텍스트의 여백을 조정할려면 추가적으로 vspace와 hspace 속성을 사용하면 됩니다.

vspace는 vertical space, hspace는 horizon space의 약자입니다.

<p><img src="totoro_200_150.jpg" align="left" hspace="5" vspace="5">수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다.</p>

수묵화처럼 담백한 일본 농촌을 배경으로 이곳에 이사 온 어린 두 자매가 숲의 요정 토토로를 만나 환상적인 경험을 하게 되는 이야기. 일본을 대표하는 애니메이션 감독인 미야자키 감독이 어린 시절부터 들어왔던 도토리 나무숲의 정령을 이미지화하기 위해 부엉이, 너구리, 곰, 팬더 등 숲 속 동물의 모습을 기본 틀로 하여, 북구의 요정 트롤, 일본 전래 도깨비의 이미지가 더해져 탄생한 것이 바로 캐릭터‘토토로’이다. 최고 인기 캐릭터인 ‘토토로’이외에도 씩씩한 소녀‘사츠키’, 개봉당시 ‘진짜 네 살바기들보다 더 진짜같다‘는 ‘메이’등 작품 속 캐릭터가 생생하게 살아있다. 감독 자신의 아버지와 어머니를 모델로 만들어 낸 메이와 사츠키의 부모는 가부장적 가족제도와는 전혀 다른 자유분방하고 따뜻한 애정의 소유자들로, 영화 개봉 후 일본에서는 ‘좋은 부모가 되는 법은 [이웃집 토토로]에 있다는 소문 속에 부모들의 단체관람이 이어지기도 했다. 그리고 그의 애니메이션에 담겨있는 ‘환경’, ‘평화’, ‘반전’과 같은 주제의식은 전 세계의 어린이 뿐 아니라 성인관객들까지 열광시키기에 충분하다


※출처 : http://www.homejjang.com/