[HTML 입문] 이미지 관련 태그

1. <img> 태그 - 이미지 삽입

<img src="경로" [속성="값"]>

ⓛ src 속성 - 이미지 파일 경로

- 하위 폴더를 나타낼 때는 '/' 기호를 사용합니다.

- 상위 폴더를 나타낼 때는 '..' 기호를 사용합니다.

② alt 속성 - 이미지를 설명해 주는 대체 텍스트

<img src="home.jpg" alt="홈으로 가기">

alt 속성의 텍스트를 화면 낭독기가 시각장애인에게 읽어 줄 수 있고 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에 alt 속성에 쓴 내용이 표시되어 어떤 이미지가 사용되었는 지 짐작할 수 있습니다.

③ width, height 속성 - 이미지 크기 조절

<h1>사려니 숲길</h1>

    <img src="images/road.jpg" alt="사려니 숲길">

    <img src="images/road.jpg" width="250" height="90" alt="사려니 숲길">

width 속성과 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시됩니다. 웹 서버에서 다운로드하는 이미지 파일의 용량은 그대로 두면서 이미지의 크기를 조절할 수 있습니다.

2. <figure>, <figcaption> 태그 - 이미지에 캡션 달기

<figure>

        <img src="images/oreum-1.jpg" alt="용눈이 오름">

        <figcaption>완만하고 부드러운 용눈이 오름</figcaption>

    </figure>

<figure> 태그로 캡션을 달 대상을 묶고 캡션은 <figcaption> 태그로 묶습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석