[HTML] 이미지 (Image)

이미지 (Image)

이미지의 표시

<img src="이미지파일 경로" [alt="이미지설명"] [width="가로크기(px)"] [height="세로크기(px)" /]>

이미지의 사용과 웹 접근성

• 스크린 리더가 인식할 수 없는 형식으로 이미지를 통한 내용의 전달은 웹 접근성을 확보할 수 없다.
• alt 속성은 스크린 리더에게 이미지의 내용을 알려주기 위한 목적으로, 가급적으로 반드시 사용하는 것이 좋다.

이미지의 크기 지정

• width, height는 이미지의 크기를 지정해 주는 속성이다.
  • 보통 px 단위를 사용하는데, px은 모니터의 한 점을 표현하는 컴퓨팅 환경에서의 크기 단위이다.
• 크기가 주어지지 않는다면 원본 크기로 표시된다.
• 가로 혹은 세로 크기만 지정될 경우, 다른 축은 이미지 비율에 따라 자동 계산되어 표시된다.

이미지의 경로

• 절대 경로
  • 웹 사이트 상에서 해당 이미지가 위치하는 URL이다.
• 상대 경로
  • 현재 HTML 파일의 위치를 기준으로 상대적인 위치를 명시한다.

<!--절대 경로-->
<img src="http://google.net/img/photo.jpg" />

<!--상대 경로-->
<img src="../folder1/photo2.jpg /">

이미지에 설명 부여하기

<figure>
	이미지 표시를 위한 <img> 태그
	<figcaption>이미지 설명 텍스트</figcaption>
</figure>

• 시멘틱 특성을 충족시키기 위해 설명을 alt 속성으로 표현하는 것이 유일한 방법이었으나, <figure> 태그로 대체할 수 있다.
• <figure> 태그는 캡션이 적용되는 범위를 지정하는 태그로, 대부분 이미지를 감싸는 용도이다.
• <figure> 태그 안에 <img> 태그를 배치시키고, 이미지에 대한 설명을 담을 캡션은 <figcaption> 태그를 사용한다.
• <img> 태그에서 title 속성을 통해 제목 표현이 가능하다.
• 책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구로 생각하면 쉽다.

<figure>
	  <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
	  <figcaption>Fig 1. 꽃사진</figcaption>
</figure>