HTML5 : 이미지 <img> 태그

기본

src 속성에 상대주소든 절대주소든 상관없이 이미지 주소를 넣으면 된다.

닫는 태그가 없으며, 인터넷에서 존재하는 이미지 주소를 복사해 사용할 수도 있다.

1
<img src="이미지 주소">
cs

웹 접근성을 위해, 시각장애인 등 화면낭독기를 사용하는 사람들을 위한 대체텍스트다.

이미지 경로가 잘못되었거나, 삭제되어 이미지가 표시되지 않을 경우에 표시되는 텍스트이기도 하다.

1
<img src="이미지 주소" alt="이미지 설명">
cs

width와 height 속성을 이용한다. 입력하지 않으면 원래 이미지의 크기대로 표시된다.

크기를 조절해도 이미지의 용량은 바뀌지 않는다.

1
<img src="이미지 주소" alt="이미지 설명" width="100px" height="100px">
cs

height 속성을 제대로 지정하지 않으면 사진이 찌그러지는 등의 역효과가 나타날 수 있다.

width 속성만 지정하면 height 값은 원래 이미지의 비율에 맞춰 자동으로 지정된다.

1
<img src="이미지 주소" alt="이미지 설명" width="100px">
cs

값에 픽셀(px) 대신 %값을 부여하여 반응형으로 만들 수 있다.

1
<img src="이미지 주소" alt="이미지 설명" width="50%">
cs

레이아웃을 잡는 초기 설계단계나, 이미지가 아직 확정되지 않았거나, 구하지 못했을 때

https://placeholder.com/ 에서 제공하는 지정한 크기의 가상이미지를 삽입하여 활용할 수 있다.

1
<img src="http://placehold.it/100x100">
cs