img 태그

태그 img는 이미지를 생성합니다. 이미지 경로는 속성 src에 지정됩니다. 닫는 태그가 필요하지 않습니다.

속성

속성	설명
src	이미지 경로를 지정합니다. 필수 속성입니다.
alt	이미지를 찾을 수 없는 경우(예: 경로가 잘못 지정된 경우) 이미지 대신 표시될 대체 텍스트입니다. 필수 속성입니다. 이 속성이 없으면 검증기(HTML 또는 CSS의 정확성을 확인하는 프로그램)에서 경고를 표시합니다.
width	이미지의 너비, 픽셀 단위(이 경우 단위를 지정하지 않음) 또는 부모 요소에 대한 백분율입니다.
height	이미지의 높이, 픽셀 단위(이 경우 단위를 지정하지 않음) 또는 부모 요소에 대한 백분율입니다.

주의 사항

이미지에 너비와 높이가 모두 설정되지 않은 경우 - 이미지는 원본 크기를 가집니다. 높이만 설정된 경우 - 이미지는 설정된 높이가 되고, 너비는 이미지의 비율이 왜곡되지 않도록 자동으로 조정됩니다.

너비만 설정된 경우 - 마찬가지로, 이미지의 높이는 비율을 유지하도록 자동으로 조정됩니다.

너비와 높이가 모두 설정된 경우 - 이미지의 비율이 왜곡될 수 있습니다(정확히 맞출 수도 있습니다). 너비나 높이(또는 둘 다)가 실제 크기보다 크면 이미지가 확대되지만, 품질이 저하됩니다.

CSS가 아닌 속성으로 이미지의 너비와 높이를 지정하는 것이 권장됩니다 - 이 경우 브라우저는 이미지를 받은 후 각 이미지의 크기를 계산할 필요가 없으므로 이미지를 더 빠르게 로드할 수 있습니다.

필요하지 않은 경우 실제 이미지 크기를 줄이는 것은 권장되지 않습니다. 예를 들어, 이미지의 실제 크기가 1000 x 1000 픽셀이지만 너비를 100px로 설정하는 경우입니다. 이 경우 화면의 이미지는 100 픽셀 크기로 보이지만, 전체 천 픽셀 크기를 가지므로 훨씬 더 오래 로드됩니다.

예제

사이트에 이미지를 추가하고 속성 height와 width를 설정하지 않겠습니다. 이미지는 원본 크기를 가집니다:

:

예제

속성 width를 사용하여 이미지에 너비를 추가해 보겠습니다. 이때 높이는 이미지의 비율을 유지하도록 자동 조정되어야 합니다:

:

예제

이번에는 속성 height를 사용하여 이미지에 높이를 추가해 보겠습니다. 이때 너비는 이미지의 비율을 유지하도록 자동 조정됩니다:

:

예제

이미지에 높이와 너비를 동시에 추가해 보겠습니다. 이 경우 이미지의 비율이 왜곡될 수 있습니다(반드시 그런 것은 아니지만, 이 경우 높이와 너비가 비율을 왜곡하도록 선택되었습니다):

:

예제

이미지 경로를 잘못 지정해 보겠습니다 (간단하게 비워두겠습니다). 이미지 대신 속성 alt의 내용이 표시됩니다 (일반 텍스트처럼 보이지만, 복사를 시도해 보세요 - 아무것도 복사되지 않습니다, 이미지처럼 끌어서 옮겨집니다):

:

같이 보기