[Html] img 이미지 태그 사용법 총정리(src, 사이즈, 정렬, 테두리, 캡션 등)

텍스트만 있는 사이트보다는 다양한 이미지들이 있는 사이트들이 조금 더 직관적이고 예쁜 사이트를 만들 수 있습니다. HTML에서 사이트에서 이미지를 나타낼 수 있는 태그는 <img>태그입니다. 이번 포스팅에서는 <img>태그의 사용법에 대해 알아보도록 하겠습니다.

 

 img 태그 사용법 

<img src="sample.png">

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

 

src 속성 (이미지 경로)

See the Pen 이미지 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

 

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

See the Pen 이미지 태그 사용법2 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

 

title 속성 (이미지 도움말)

See the Pen 이미지 태그 사용법3 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

 

align 속성 (이미지 정렬)

See the Pen 이미지 태그 사용법4 by wjdxo513 (@wjdxo513) on CodePen.

 

left, right, top, middle, bottom

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

 

 

이미지 가운데 정렬

See the Pen 이미지 태그 사용법4 by wjdxo513 (@wjdxo513) on CodePen.

 

이미지 가운데 정렬을 방법은 다양하게 있습니다. 대부분 1번과 같이 css를 사용해서 가운데 정렬을 하며 이것이 지저분하다고 생각되면 2번 방법처럼 <p> 태그를 활용해서 가운데 정렬을 할수도 있습니다.

 

 

Border 속성 (이미지 테두리)

See the Pen 이미지 태그 사용법5 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

 

Height, Width 속성 (이미지 넓이)

See the Pen 이미지 태그 사용법6 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

 

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

See the Pen 이미지 태그 사용법7 by wjdxo513 (@wjdxo513) on CodePen.

 

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

 

HTML5 이전에는 이미지에 설명글(캡션)을 붙이기 위해 <p> 태그를 사용해 텍스트 단락을 표시한 후 위치를 조절해야했는데요. HTML5 이후에는 새로 추가된  figure, figcaption 태그를 활용해서 이미지나 비디오등 다양한 요소에 설명글을 붙일 수 있게 되었습니다.