본문 바로가기

Web standard

이미지

반응형

이미지(img 요소)


img요소에는 src속성과 alt속성이 필수이며 src 속성으로 이미지파일의 URI를 alt속성으로 대체텍스트를 지정한다. alt속성으로 대체텍스트를 작성할 때는 구체적으로 작성하지만 지나치게 긴 문장은 삼가하도록 하고 별도의 설명이 필요하면 title속성을 활용한다. title속성으로 설명을 하더라도 한계가 있으므로 longdesc속성으로 참고 URI를 지정할 수 있다.

예제)

<img src="images/img.gif" alt="프린터사진" title="이 컴퓨터에 연결 가능한 프린터 사진" longdesc="printer.html" /> 

 

longdesc속성은 특히 이미지에 이미지맵을 설정할 때 텍스트로 구성한 사이트맵 페이지의 URI를 지정해 두는 방법으로도 활용된다.

<img src="images/banner.gif" align="left" usemap="#imgmap" longdesc="linkex.html">
<map name="imgmap">
<area shape="rect" coords="34,50,306,142" href="#" alt="네이버로 이동">
<area shape="rect" coords="313,50,540,142" href="#" alt="네이트로 이동">
<area shape="rect" coords="544,50,745,142" href="#" alt="다음으로 이동">
</map>

 

img요소의 폭과 높이는 'width'속성과 'height'속성으로 지정한다. 폭과 높이를 '픽셀'로 지정하면 브라우저에서 이미지를 다 읽어들이지 않고도 그 영역을 확보하고 다른부분을 먼저 표시하여 페이지 전체의 출력이 부드럽게 진행되도록 한다. 이미지에 링크를 설정하면 테두리가 생기는데 img요소에 border속성을 이용하여 제거했으나 XHTML1.0에서는 비추천요소이며 XHTML1.1에서 폐지되었으므로 CSS를 이용, img{border:0;}과 같이 표현하도록 한다. 또, 배치와 여백설정을 위해서 align속성과 hspace, vspace속성을 이용하였으나 역시 XHTML1.0에서 비추천요소이며 XHTML1.1에서 폐지되었으므로 모두 CSS로 표현한다. align속성은 float속성과 vertical-align속성으로, hspace속성과 vspace속성은 margin속성으로 구현하도록 한다.

img요소 이외에 object요소를 이용해서 이미지를 구현할 수도 있는데
<object data="images/img.gif" type="image/gif">XHTML2.0에서 이미지 표현</object> 과 같이 표현한다. 마임타입은 gif파일일 경우 'image/gif', jpeg파일일 경우 'image/jpeg', png파일은 'image/png'이다. XHTML2.0에서는 img요소가 폐지되고 object요소로 대체될 것이다



예제)



<h1><img src="images/logo.gif" alt="웹접근성연구소 Web Accessibility Laboratory" /></h1>


---------------------------------------



<p><img src="images/text.gif" alt="장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 인터넷 공간 만들기" /></p>


---------------------------------------



<p><img src="images/message.gif" alt="ceo인사말" title="사람을 아름답게, 세상을 아름답게. 아름다운 가게는 나눔과 순환이라는 세상원리를 실천하는 곳입니다. 새 물건을 사고 파는 곳이 아니라 이미 사용하던 물건을 새로운 마음으로 사고 파는 장소이며 헌 물건 속의 그 물건을 만든 사람의 땀과 애환을 보태어, 사용하던 분들의 기쁨과 슬픔, 환희와 고통, 황홀함과 역경 등이 녹아 배어 있는 곳입니다." /></p>


---------------------------------------



<p><img src="images/map.gif" alt="지하철3호선 안국역 1번출구 나와서 50미터 전방 아름다운가게본부" /></p>


---------------------------------------



<p><img src="images/drink.gif" alt="미에로파이바 브랜드스토리" longdesc="html/desc.html" /></p>


또는 텍스트의 배포를 쉽게 하기 위해서 링크설정을 하기도 한다.

<p><img src="images/drink.gif" alt="미에로파이바 브랜드스토리" longdesc="html/desc.html" /><a href="html/desc.html">[D]</a></p>


---------------------------------------



<p><img src="images/sitemap.gif" alt="사이트맵" longdesc="html/sitemap.html" /><a href="html/sitemap.html">[D]</a></p>
반응형