size="2">7. 이미지 삽입하기
1) 삽입 방법
html 파일에 이미지 삽입하는 방법은
<IMG SRC="그림파일">이라고 사용합니다. IMG는 image의
약자라고 보면 되죠.
<IMG
SRC="그림파일" border="n" width="n"
height="n">
html 파일과 이미지가
같은 디렉토리에 있을 경우에는 src 부분에 그냥 이미지 명만 적으면
됩니다. 이미지의 파일 이름이 flower.gif 라면 <img src="flower.gif">
와 같이 나타내 주면 되죠.
그런데 다른 디렉토리에
있다면 디렉토리 정보도 함께 보여줘야 합니다. 만약 index.html 이라는
파일에 이미지를 삽입하려고 하는데, image라는 디렉토리를 만들고 그
안에 flower.gif 라는 파일이 존재한다면 <img src="image/flower.gif">
라고 사용하면 되죠. flower.gif 라는 파일은 image 라는 디렉토리 밑에
있고 index.html 이라는 파일과 image라는 디렉토리는 같은 위치에 존재한다는
가정에서 가능하죠.
만약 내 홈페이지가
두 개가 있는데, 하나는 http://zine.intz.com/home 이고 다른 하나는
http://www.clipartworld.com 이라고 가정을 해봅시다. intz라는 계정에
image라는 디렉토리를 만들고 flower.gif 라는 파일을 올려놓았어요.
그런데 clipartworld라는 계정에서 사용하고 싶어요. 어떻게 하면 되죠?
<img src="http://zine.intz.com/home/image/flower.gif">
라고 사용을 하면 됩니다. 메일을 보낼 때 html 형태로 보내려면 이미지를
먼저 서버로 올린 후에 이런 식으로 링크를 시켜서 보내면 예쁜 메일을
보낼 수 있겠죠?
<!-- Image의 width와
height를 임의로 조절하는 것은 바람직하지 않습니다. 포토샵이나 페인트샵
프로 등의 툴을 이용해서 사이즈를 조절하는 것이 좋습니다. 그래야
보기가 더 좋거든요. -->
<!-- 이미지나 링크를
사용할 경우 절대경로와 상대경로에 대해 이해하는 것이 중요합니다.
절대경로와 상대경로에 대한 자세한 내용을 보시려면 size="2"> size="2">여기를 클릭하세요.
-->
2) 삽입시 주의사항
별로 주의사항이라고
할 수도 없는데, 만약 제대로 연결을 한 것 같은데, PC에서는 제대로
이미지가 보였는데 서버에 올린 후 이미지가 보이지 않으면 다음 사항을
의심해보세요.
이미지가
서버에 있는가?
자신의 PC에서 작업을 한 후, html 파일만 올리고 이미지 파일을
올리지 않아 보이지 않는 경우가 있어요.
대소문자가
확실한가?
이미지
파일이름의 대소문자와 <img src="..."> 의 src
부분에 들어간 이름의 대소문자가 동일한지 확인해 봐야 합니다.
window 시리즈는 대소문자를 구별하지 않습니다. 이미지 이름이
FLOWER.GIF 인데 <img src="flower.gif"> 라고
해놓고 window가 install 되어 있는 컴퓨터에서 테스트를 하면 잘
보입니다.
웹서버는 크게 유닉스 계열과 NT 계열로 볼 수 있는데,
NT 같은 경우는 대소문자를 구별하지 않지만 유닉스 계열은 대소문자를
구별한답니다. aaa, Aaa, AAa, AAA 가 모두 다르게 인식이 되지요.
링크가
제대로 되어있나?
<img src="...">의 src 부분에 file:///C:/home/nanumi/logo.gif와
같이 링크가 걸려있지는 않은지 확인해 보세요.
주의사항이라고 할
수도 없는데, 처음에 많이 실수하는 부분이니까 참고하세요. |
[펌 강의] 7. 이미지 삽입하기 
