믿고 함께하는 서비스 만들기 - 웹호스팅


이미지 포맷	이미지 삽입	이미지 정렬	이미지맵 만들기

1. 이미지의 주위에 텍스트가 있는 경우 이미지의 위치설정

<head>
<title>이미지 정렬1</title>
</head>
<body>
    <img src="http://design.new21.com/image/design/html/image_img03.gif" width="150" height="120" border=0
    align="left">
    [ 이미지가 텍스트의 왼쪽에 있습니다. ]<p>
    아주 귀여운 강아지군요!<p>이름은 멍멍이입니다.<p>나이는 2살이구요.
    <p><br>
    <img src="http://design.new21.com/image/design/html/image_img03.gif" width="150" height="120" border=0
    align="right">
    [ 이미지가 텍스트의 오른쪽에 있습니다. ]<p>
    아주 귀여운 강아지군요!<p>이름은 멍멍이입니다.<p>나이는 2살이구요.
</body>

2. 이미지 옆에 있는 텍스트의 위치 설정

* TOP : 이미지의 윗부분을 기준으로 텍스트가 정렬됩니다.
* MIDDLE : 이미지의 중앙을 기준으로 텍스트가 정렬됩니다.
* BOTTOM : 이미지의 하단을 기준으로 텍스트가 정렬됩니다.

<head>
<title>이미지 정렬2</title>
</head>
<body>
    <img src="http://design.new21.com/image/design/html/image_img03.gif" width="150" height="120" border="1"
    align="top">
    이미지의 상단에 맞춰 텍스트가 정렬됩니다.<p>
    <img src="http://design.new21.com/image/design/html/image_img03.gif" width="150" height="120" border="1"
    align="middle">
    이미지의 중앙에 맞춰 텍스트가 정렬됩니다.<p>
    <img src="http://design.new21.com/image/design/html/image_img03.gif" width="150" height="120" border="1"
    align="bottom">
    이미지의 하단에 맞춰 텍스트가 정렬됩니다.
</body>

3. 이미지와 텍스트와의 간격 조절

이미지의 얼라인(align) 속성 중 left/right를 이용하면 이미지의 왼쪽 또는 오른쪽으로 텍스트를 위치시킬 수 있습니다. 그런데 이미지와 텍스트 사이이의 간격이 너무 좁으면 사용자들이 보기에 좋지 않습니다. 이때 이미지와 텍스트 사이의 간격을 벌려주는 것이 HSPACE 와 VSPACE입니다.

- VSPACE : 이미지와 주위 요소들 간의 수직 간격을 조절합니다.
- HSPACE : 이미지와 주위 요소들 간의 수평 간격을 조절합니다.

<html>
<head>
<title>이미지 정렬3</title>
</head>
<body>
    <h5>1. 이미지와 요소 사이의 수평간격 조절</h5>
    <img src="http://design.new21.com/image/design/html/logo_img.gif" width="95" height="96" border="1"
    align="left" hspace="20">
    아사달의 상징은 태양 속에 살고 있다는 세발까마귀, 일명 삼족오(三足烏)
    입니다. 삼족오는 고구려 고분벽화에 자주 등장하는 전설상의 동물로서
    태양을 상징합니다. 아사달의 기본 색깔은 이글거리며 타오르는 태양처럼
    붉은 색입니다. 태양의 밝은 빛을 받아 대자연의 녹음이 우거지듯, 아사달의
    밝은 빛으로 21세기 인터넷 시대를 개척하고자 합니다. 세발까마귀는 태양
    흑점을 발견한 고대 우리 선조들의 과학정신의 상징이기도 합니다.<p>
    <h5>2. 이미지와 요소 사이의 수직간격 조절</h5>
    <img src="http://design.new21.com/image/design/html/logo_img.gif" width="95" height="96" border="1"
    align="right" vspace="20">
    아사달의 상징은 태양 속에 살고 있다는 세발까마귀, 일명 삼족오(三足烏)
    입니다. 삼족오는 고구려 고분벽화에 자주 등장하는 전설상의 동물로서
    태양을 상징합니다. 아사달의 기본 색깔은 이글거리며 타오르는 태양처럼
    붉은 색입니다. 태양의 밝은 빛을 받아 대자연의 녹음이 우거지듯, 아사달의
    밝은 빛으로 21세기 인터넷 시대를 개척하고자 합니다.
    까마귀의 발이 왜 두 개가 아니라 세 개일까 하는 궁금증이 생길 것입니다.
    원래 우리 민족이 '3'이라는 숫자를 유난히 좋아했기 때문일 수도 있겠지만,
    태양 속에 흑점을 자세히 관찰하면 마치 세 발 달린 까마귀 모양을 하고 있다
    는 것을 알 수 있습니다. 이런 점에서 세발까마귀는 태양 흑점을 발견한 고대
    우리 선조의 과학정신의 상징이기도 합니다.
</body>
</html>