베스트 키워드 더보기
주간 월간 연간 누적
디자인몰 통합검색 전체 검색 정액숍 검색 무한숍 검색
검색 상세검색
이벤트
콘텐츠 개수 오늘어제이번달지난달누적
HTML 소개
텍스트
링크
이미지
테이블
인클루드
프레임
폼(FORM)
이미지 자르기
색상코드표
이미지 포맷 이미지 삽입 이미지 정렬 이미지맵 만들기

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

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://design.new21.com/image/design/html/image_img02.gif" width="135" height="98" border="0">
    <h5>2. 이미지의 크기를 임의로 변경한 경우</h5>
    <img src="http://design.new21.com/image/design/html/image_img02.gif" width="150" height="50" border="0">
    <h5>3. 이미지의 경계선 두께를 조절한 경우</h5>
    <img src="http://design.new21.com/image/design/html/image_img02.gif" width="135" height="98" border="5">
    <h5>4. 이미지의 설명글을 달아준 경우</h5>
    <img src="http://design.new21.com/image/design/html/image_img02.gif" width="135" height="98" border="0"
    alt="아사달의 로고입니다.">
</body>
</html>

주문제작 안내 디자인이용요금표 우수회원 틀리기 쉬운 외래어 고객센터   모바일웹
아사달 사업자등록증 기술보증기금 인증 벤처기업 기술혁신쳥 중소기업(INNO-BIZ) 정보보호 안전진단 필증 획득 ISO9001 인증기업 기술신용보증기금 우량기술기업선정 서울지방중소기업청 imagedj
ICANN 인증 국제도메인등록기관 한국인터넷진흥원공인 도메인등록대행자 (사)한국인터넷호스팅협회 아사달 특허등록 한국산업기술진흥협회 기업부설연구소 통일부 문화체육관광부 대통령상 수상
사이트명 : 뉴21 | 회사명 : (주)아사달 | 대표이사 : 서창녕, 심재춘 | 대표전화 : 070-7510-3007 | 팩스번호 : 02-2026-2008
사업자등록번호 : 206-81-24351 | 법인등록번호 : 110111-1940504 | 통신판매업신고 : 제18-890호 | 벤처확인번호 : 051134562200563
(우편번호 : 153-803) 서울특별시 금천구 가산동 371-28 우림라이온스밸리 A,동 8층 (주)아사달
Copyright ⓒ new21.com All rights reserved.

인터넷 익스플로어 구글 크롬 모질라 파이어폭스
애플 사파리 오페라 넷스케이프
맨위로