[Html] 이미지(image) 를 어떻게 하는가.

HTML문서에 이미지를 삽입하는 방법

HTML문서에 이미지를 삽입하기 위해서는 <img>태그를 사용합니다. <img src="이미지경로"> <img>태그의 가장 기본적인 속성은 이미지 경로를 지정하는 src 속성입니다. 만일 이미지 파일과 HTML 파일이 같은 폴더내에 있다면 그냥 이미지 파일명만 입력해 주면 됩니다. 이미지의 너비와 높이를 지정하기 위해서는 width 속성과 height 속성을 사용합니다. 이 속성을 지정해주지 않으면 기본적으로 이미지 자체의 너비와 높이로 삽입됩니다. <img src="이미지경로" width="100" height="200"> 이미지에 링크를 거는 경우 링크가 걸린 이미지라는 것을 표시해주기 위해서 기본적으로 이미지의 경계선이 1픽셀로 표시됩니다. 그래서 이 경계선을 없앨려면 border 속성을 0으로 지정해 줍니다. <a href="url"><img src="이미지경로" border="0"></a> 위의 예제에서 border 속성을 지우고 테스트 해보면 쉽게 이해할 수 있습니다. 초보자들이 HTML문서에 이미지를 삽입할때 가장 실수를 많이 하는 부분이 바로 이미지 경로입니다.

이미지 경로 - 절대경로와 상대경로

이미지의 경로를 지정하는 방법은 절대경로와 상대경로가 있습니다. 이 절대경로와 상대경로는 이미지 삽입뿐 아니라 링크를 걸때도 똑같이 적용되는 부분이므로 아주 중요합니다. 1. 절대경로 이미지의 절대적인 경로로 지정하는 방식입니다. <img src="http://www.homejjang.com/images/tree00.gif> <img src="c:home\images\tree00.gif"> 절대경로는 고유한 경로입니다. 위의 예처럼 http://가 포함되어 있는 절대경로를 경로명만 웹브라우저 주소줄에 입력해도 그 이미지가 그대로 나옵니다. 보통 홈페이지 제작시 자신의 컴퓨터에서 HTML 문서를 만들고 이를 FTP를 통해서 웹서버에 일괄적으로 올립니다. 이런 경우 절대경로로 이미지를 삽입했다면 모두 고쳐줘야 하는 불편이 있습니다. 그래서 일반적으로 절대경로보다는 상대경로를 이용해서 이미지를 삽입하는게 좋습니다.

2. 상대경로 상대경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식하는 방법입니다. 이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지, 하위 폴더에 있는지를 따져보고 경로를 지정해줘야 합니다. 먼저 HTML 문서와 이미지 파일이 같은 폴더에 저장되어 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않습니다. 그러나 다른 폴더에 있다면 이 다른폴더의 위치를 지정해 주는 방법을 이해해야 합니다. 하위폴더로 이동하는 방법은 하위폴더명를 적어주고 슬래쉬(/)를 입력해 주면 됩니다. 보다 간단하게 설명하기 위해서 html 문서는 index.html이라고 하고, 여기에 삽입해야 할 이미지 파일명은 logo.gif라고 가정하겠습니다. index.html 파일이 c:home 폴더에 위치하고있고 logo.gif 파일은 c:home 폴더의 하위폴더인 images 폴더에 위치하고 있으면 <img scr="images/logo.gif">와 같이 지정하면 됩니다.  현재 폴더의 하위폴더인 images 폴더에 logo.gif파일이 위치하고 있다는 표시죠. 상위폴더로 이동하는 방법은 ../ 이와같이 표현합니다. index.html 파일이 c:home\doc 폴더에 위치하고있고 logo.gif 파일은 c:home\images 폴더에 위치하고 있으면 <img scr="../images/logo.gif"> 이와 같이 지정합니다. ../ 를 통하여 일단 상위폴더로 나간다음(c:\home 폴더) 다시 images 폴더로 들어가는 거죠. 절대경로와 상대경로를 처음 접하면 이해하기 힘든 내용이지만 경로를 지정하는 방법은 컴퓨터를 사용하는데 기본적인 것이기 때문에 사용하다 보면 자연스럽게 이해하게 됩니다.

이미지 포맷 - 홈페이지에서 사용하는 이미지의 종류

홈페이지에서 사용하는 이미지는 대표적으로 jpg, gif, png 파일이 있습니다. 1. GIF GIF 파일은 색상 수를 줄여 이미지의 용량을 줄이는 방법을 쓰는 형식입니다. 저장할 때 이미지 전체에서 평균적으로 많이 쓰이는 256가지 색을 추출하여 컬러 인덱스를 만들고 그 컬러 인덱스의 256가지 색으로 전체 이미지를 표현합니다. 색상을 표현하는 수가 적다는 단점이 있지만 적은 수의 색상으로구성되는 경우 이미지의 용량이 아주 적어지므로 홈페이지의 아이콘이나 버튼 등에 많이 사용되는 포맷입니다. 기타 움직이는 gif 애니메이션 파일과 투명배경이 필요한 이미지를 만들때 사용합니다. 2. JPG 압축으로 인한 이미지 손실에 적어서 이미지 저장에 가장 많이 사용되는 형식입니다. GIF 포맷과는 달리  JPEG는 RGB 이미지에서의 모든 컬러 정보를 유지하고 있습니다. 그러므로 이미지를 구성하고 있는 색상의 수가 많을경우 jpg 파일로 저장하는것이 좋습니다. 3. PNG Portable Network Graphics의 약자로 인터레이스 기능을 지원하며 JPEG와 같이 압축률을 높이기 위해 등장한 포맷입니다. GIF처럼 색상수를 줄여 압축하는 형식의 이미지 포맷이며 GIF 보다 10~30% 정도의 뛰어난 압축률을 제공합니다. 기본적으로 트루컬러를 지원하고 비손실 압축을 사용하여 이미지 변형 없이 원래이미지를 웹상에 그대로 표현할 수 있습니다. GIF와 JPEG에 이어 새롭게 떠오르고 있는 웹 이미지 포맷이라 할 수 있겠습니다.

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