베스트 키워드
주간 월간 연간
검색  상세검색
이벤트 디자이너를 위한 디자인 세상 아사달이 만들어갑니다.
디자인센터 보유 현황 오늘어제이번달지난달누적
웹기획
HTML 사용법
    - HTML 소개
    - 텍스트
    - 링크
    - 이미지
    - 테이블
    - 인클루드
    - 프레임
    - 폼(FORM)
    - 이미지 자르기
    - 색상코드표
포토샵 사용법
일러스트 사용법
플래시 사용법
일러스트 만들기
편집사진 만들기
사물 편집사진 만들기
플래시 모션 만들기
플래시 스크립트 만들기
웹구성 요소 만들기
웹 페이지 만들기
생활 홈페이지 만들기
비즈니스 홈페이지 만들기
쇼핑몰 홈페이지 만들기
이미지
Home > 디자인 센터 > 웹강좌 > HTML 사용법 > 이미지
이미지 포맷 이미지 삽입 이미지 정렬 이미지맵 만들기

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

<img src="이미지 파일의 경로명" align="정렬방법">

    - LEFT : 이미지를 문서의 왼쪽으로 정렬시킵니다.
      이미지 주위에 텍스트가 있는 경우에는 텍스트의 왼쪽에 이미지가 위치하게 됩니다.
    - RIGHT : 이미지를 문서의 오른쪽으로 정렬시킵니다.
      이미지 주위에 텍스트가 있는 경우에는 텍스트의 오른쪽에 이미지가 위치하게 됩니다.
<head>
<title>이미지 정렬1</title>
</head>
<body>
    <img src="http://center.new21.com/image/center/web/html/image_img03.gif" width="150" height="120" border=0
    align="left">
    [ 이미지가 텍스트의 왼쪽에 있습니다. ]<p>
    아주 귀여운 강아지군요!<p>이름은 멍멍이입니다.<p>나이는 2살이구요.
    <p><br>
    <img src="http://center.new21.com/image/center/web/html/image_img03.gif" width="150" height="120" border=0
    align="right">
    [ 이미지가 텍스트의 오른쪽에 있습니다. ]<p>
    아주 귀여운 강아지군요!<p>이름은 멍멍이입니다.<p>나이는 2살이구요.
</body>

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

<img src="이미지 파일의 경로명" align="정렬방법">

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

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

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

<img src="이미지 파일의 경로명" vspace="세로간격" hspace="가로간격">

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

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

<html>
<head>
<title>이미지 정렬3</title>
</head>
<body>
    <h5>1. 이미지와 요소 사이의 수평간격 조절</h5>
    <img src="http://center.new21.com/image/center/web/html/logo_img.gif" width="95" height="96" border="1"
    align="left" hspace="20">
    아사달의 상징은 태양 속에 살고 있다는 세발까마귀, 일명 삼족오(三足烏)
    입니다. 삼족오는 고구려 고분벽화에 자주 등장하는 전설상의 동물로서
    태양을 상징합니다. 아사달의 기본 색깔은 이글거리며 타오르는 태양처럼
    붉은 색입니다. 태양의 밝은 빛을 받아 대자연의 녹음이 우거지듯, 아사달의
    밝은 빛으로 21세기 인터넷 시대를 개척하고자 합니다. 세발까마귀는 태양
    흑점을 발견한 고대 우리 선조들의 과학정신의 상징이기도 합니다.<p>
    <h5>2. 이미지와 요소 사이의 수직간격 조절</h5>
    <img src="http://center.new21.com/image/center/web/html/logo_img.gif" width="95" height="96" border="1"
    align="right" vspace="20">
    아사달의 상징은 태양 속에 살고 있다는 세발까마귀, 일명 삼족오(三足烏)
    입니다. 삼족오는 고구려 고분벽화에 자주 등장하는 전설상의 동물로서
    태양을 상징합니다. 아사달의 기본 색깔은 이글거리며 타오르는 태양처럼
    붉은 색입니다. 태양의 밝은 빛을 받아 대자연의 녹음이 우거지듯, 아사달의
    밝은 빛으로 21세기 인터넷 시대를 개척하고자 합니다.
    까마귀의 발이 왜 두 개가 아니라 세 개일까 하는 궁금증이 생길 것입니다.
    원래 우리 민족이 '3'이라는 숫자를 유난히 좋아했기 때문일 수도 있겠지만,
    태양 속에 흑점을 자세히 관찰하면 마치 세 발 달린 까마귀 모양을 하고 있다
    는 것을 알 수 있습니다. 이런 점에서 세발까마귀는 태양 흑점을 발견한 고대
    우리 선조의 과학정신의 상징이기도 합니다.
</body>
</html>
사이트명 : 아사달닷컴 | 회사명 : (주)아사달 | 대표이사 : 서창녕 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134532200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28번지 우림라이온스밸리 A동 8층 (주)아사달
Copyright ⓒ asadal.com All rights reserved.
아사달 이용 가능 브라우저