3-11. 이미지와 관련된 요소들

1. <img>요소로 이미지를 삽입하는 경우 "src"속성으로 이미지 파일의 경로를 "alt"속성으로 대체 텍슽트를 작성합니다. "alt"속성으로 대체 텍스트를 작성할 때에는 일반적으로 이미지에 표현된 텍스트를 그대로 입력하지만, 약도 등의 이미지에서는 보다 구체적인 설명을 입력할 수 있습니다. 또한 경우에 따라 이미지를 단순한 텍스츠로 설명하기 어려운 경우(사이트 맵, 조직도, 다이어그램 등)에는 "longdesc"속성으로 참조할 파일의 경로를 작성하기도 합니다.

2. 이미지 삽입하기

<h2> <a href="#" title="앙큼한유채`s 일상 Story"> <img src="images/logo.png" alt="logo"> </a> </h2>

3. 이미지로 만든 약도의 표현

많은 웹 사이트는 이미지를 이용해서 약도를 표현합니다. 약도를 표현할 때는 "alt"의 값으로 구체적인 설명이 있어야 합니다. 구체적으로 작성할 시 "alt"를 사용하여 작성할 수 있습니다.

<p> <img src="image/loadmap.png" alt="지하철 9호선 13번 출구 또는 지하철 2호선 1번 출구로 나와서 250미터 정도 직진한 후, 우측의 컨벤션센터웨딩홀을 돌아 50미터 오십시오."> </p>

4. <figure>, <figcaption>속성 알아보기

사이트 맵이나 다이어그램, 조직도 등의 이미지는 "longdesc" 속성을 통해 구체적으로 설명할 수 있습니다. 다음의 이미지는 작업 진행의 프로세스를 나타냅니다.

4-1. 일반적으로 "alt"를 통해서 작성할 수 있습니다.

<p> <img src="images/process.gif" alt="1. 기증신청 및 접수, 2. 기증품 수거, 3. 물품분류 및 판매가격 책정"> </p>

4-2. <figure>, <figcaption> 속성

<figure> <img src="images/process.gif" alt="기증프로세스"> <figcaption> <ol> <li>기증신청 및 접수</li> <li>기증품 수거</li> <li>물품분류 및 판매가격 책정</li> <li>매장/행사장 판매</li> <li>배분사업을 통한 수익나눔</li> </ol> </figcaption> </figure>