[Html] img 이미지 태그 사용법 총정리

img 태그 사용법

<img src="sample.png">

img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그입니다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성해주셔야 정상적으로 출력됩니다. 참고로 </img>태그는 꼭 사용하지 않아도 됩니다.

 

src 속성 (이미지 경로)

<img src="경로 쓰는곳"/>

이미지를 웹 문서에 넣으려면 src속성에 정확한 이미지의 경로를 지정해야 합니다. 이미지를 삽입하려는 웹페이지와 같은 폴더에 있을때는 이미지 파일명만 넣어주어도 무방하지만 그렇지 않다면 경로를 모두 써줘야 합니다. 또한 컴퓨터에 있는 이미지 파일과 웹 상에 있는 이미지 링크를 사용하는 경우에 따라 경로에 들어가는 값이 다릅니다.

 

alt 속성 (이미지 대체 텍스트)

<img src="https://i.ibb.co/3493r17/cat.jpg" alt="고양이"/>

alt 속성은 이미지가 제대로 로드되지 않았을 경우 대체 문구를 나타내줍니다. 이 alt 속성은 장애인들을 위한 웹 접근성에도 필요한 속성인데요. 웹 문서에 삽입한 이미지는 시각적인 요소이기 때문에 시각장애인들은 그 내용을 알 수 없습니다. 웹 문서를 읽어주는 텍스트 리더기도 문서에 있는 텍스트만 읽어주기 때문에 이미지는 건너뛰게 됩니다. 하지만 <img>태그에 alt속성이 들어가 있다면 이미지에 대한 설명을 넣을 수 있고 텍스트 리더기는 시각장애인에게 alt 속성에 정의되어 있는 문구를 읽어줄 수 있습니다.

 

title 속성 (이미지 도움말)

<img src="경로 쓰는곳" title="도움말"/>

title 속성은 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선 도움말의 문구를 나타냅니다.

 

align 속성 (이미지 정렬)

<img src="경로 쓰는곳" align="right"/>

left, right, top, middle, bottom

align은 정렬과 관련된 속성으로 이미지의 위치를 지정할 수 있습니다. left와 rigth 이미지의 수평정렬, top, middle, bottom 으로 이미지의 수직정렬을 진행할 수 있습니다. 참고로 align에서 center 가운데 정렬은 불가능합니다.

 

Border 속성 (이미지 테두리)

<img src="경로 쓰는곳" border="10"/>

border 속성은 이미지에 테두리를 만들어줍니다. 이미지에 하이퍼링크가 만들어졌을 경우는 border=0을 입력해 테두리를 없애주어야 합니다.

 

Height, Width 속성 (이미지 크기)

<img src="경로 쓰는곳" width=100 height=100/>

height, width 속성은 이미지의 너비와 높이를 HTML안에서 재설정하는 속성으로 너무 크게하거나 너무 작게 하면 이미지가 깨질 수 있습니다.만약 width와 height 속성을 사용하지 않으면 원본 이미지 크기 그대로 브라우저 화면에 표시됩니다. 

 

figure, figcaption 태그 (이미지 설명 글)

<figure>
    <img src="경로 쓰는곳">
    <figcaption>사진 설명</figcaption>
</figure>

<figure> 태그는 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용합니다. 한 단위가 되는 요소를 나타내기 위해서는 <figure> 태그만 사용하고 설명 글을 사용하기 위해서는 <figure> 태그안에 <figcaption> 태그를 사용해 설명 글을 표시합니다.