일일 할인 쿠폰 이벤트
베스트 브랜드 20% 포인트 적립 이벤트
  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://hosting.gagadomain.com/image/design/html/image_img02.gif" width="135" height="98" border="0">
    <h5>2. 이미지의 크기를 임의로 변경한 경우</h5>
    <img src="http://hosting.gagadomain.com/image/design/html/image_img02.gif" width="150" height="50" border="0">
    <h5>3. 이미지의 경계선 두께를 조절한 경우</h5>
    <img src="http://hosting.gagadomain.com/image/design/html/image_img02.gif" width="135" height="98" border="5">
    <h5>4. 이미지의 설명글을 달아준 경우</h5>
    <img src="http://hosting.gagadomain.com/image/design/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 ⓒ gagadomain.com All rights Reserved.
페이지 맨 위로 이동하기