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

초창기 홈페이지들은 대부분이 텍스트만을 이용하여 만들어졌습니다. 하지만, 인터넷 기술의 발전과 더불어 이미지들을 사용하는 홈페이지들이 이제는 너무나 자연스럽게 되었습니다. 여기에서는 이미지의 삽입과 전체 속성에 대해 알아보겠습니다.

1. 이미지를 삽입하는 기본 형식은 다음과 같습니다.

<img src="이미지 파일 경로명" width="이미지 가로길이" height="이미지 세로길이">

이미지 파일의 경로명은 앞서 링크에서 상대주소 설정할 때의 방법을 그대로 이용하시면 됩니다. "width"는 이미지의 가로길이, "height"는 이미지의 세로길이입니다. 적어주는 수치대로 이미지의 크기는 조절이 가능합니다. 대신 홈페이지에서 사용하는 이미지는 비트맵 이미지이므로 가로/세로 비율을 마음대로 조절하면 깨져 보일 수 있습니다. 그렇기 때문에 제 크기대로 적어주는 것이 좋습니다.

2. 이미지 삽입

<img src="이미지 파일 경로명" border="이미지 경계선 굵기" alt="이미지 대체설명">

"border"는 이미지 파일의 주변에 나타나는 경계선의 굵기를 지정합니다. 일반적으로 이미지에 링크를 걸었을 경우에는 border 값이 1로 설정이 됩니다. 이 테두리를 없애려면 border="0"으로 지정하면 테두리를 사라지게 할 수 있습니다. "alt"는 이미지를 나타낼 수 없는 경우 이미지를 대신 설명할 수 있는 텍스트를 지정하는 것입니다. 이미지가 뜨지 않는다 해도 사용자들은 그 설명을 보고 이동할 수 있습니다.



<html>
<head>
<title>이미지 삽입하기</title>
</head>
<body>
    <h5>1. 일반적인 이미지 삽입</h5>
    <img src="http://center.new21.com/image/center/web/html/image_img02.gif" width="135" height="98" border="0">
    <h5>2. 이미지의 크기를 임의로 변경한 경우</h5>
    <img src="http://center.new21.com/image/center/web/html/image_img02.gif" width="150" height="50" border="0">
    <h5>3. 이미지의 경계선 두께를 조절한 경우</h5>
    <img src="http://center.new21.com/image/center/web/html/image_img02.gif" width="135" height="98" border="5">
    <h5>4. 이미지의 설명글을 달아준 경우</h5>
    <img src="http://center.new21.com/image/center/web/html/image_img02.gif" width="135" height="98" border="0"
    alt="아사달의 로고입니다.">
</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.
아사달 이용 가능 브라우저