HTML <img> alt 속성

정의와 사용법

alt 속성은 필수 속성으로, 이미지가 표시되지 않을 때의 대체 텍스트를 정의합니다.

아래의 이유로 사용자가 이미지를 볼 수 없을 때, alt 속성은 이미지에 대체 정보를 제공할 수 있습니다:

  • 인터넷 속도가 너무 느릅니다
  • src 속성에 오류가 있습니다
  • 브라우저가 이미지를 비활성화했습니다
  • 사용자가 스크린 레디어를 사용하고 있습니다

<img> 태그의 alt 속성은 이미지가 표시되지 않거나 사용자가 이미지 표시를 비활성화할 때, 브라우저에 표시되는 대체 내용을 지정합니다.

문서의 각 이미지에 이 속성을 사용하는 것을 강력히 추천드립니다. 이렇게 하면 이미지가 표시되지 않을 때에도 사용자가 잃어버린 것이 무엇인지에 대한 정보를 볼 수 있습니다. 또한 장애인에게는 alt 속성이 일반적으로 이미지 내용을 이해하는 유일한 방법입니다.

알림:이미지에 도구 툴팁을 만들기 위해 사용하십시오: title 속성!

도구 툴팁과 주석

주석:alt 속성 값은 공백과 기호를 포함할 수 있는 최대 1024개의 문자를 포함할 수 있는 문자열입니다. 이 문자열은 괄호 내에 포함되어야 합니다. 이 alt 텍스트는 특수 문자의 엔티티 참조를 포함할 수 있지만, 다른 카테고리의 태그를 포함할 수 없으며, 특히 스타일 태그를 포함할 수 없습니다.

주석:사용자가 img 요소에 마우스를 가져다 놓으면, 인터넷 익스플로러는 alt 속성의 값을 표시합니다. 이는 올바른 행동이 아닙니다. 다른 모든 브라우저는 표준에 점점 더 가까워지고 있으며, 이미지가 표시되지 않을 때에만 대체 텍스트를 표시합니다.

알림:이미지에 도구 툴팁을 만들기 위해 사용하십시오: title 속성

예시

예제 1

<img src="/i/eg_tulip.jpg" alt="상해 꽃시장 - 풀리" />

직접 테스트해 보세요

이미지를 표시할 수 없을 때, 브라우저는 이와 같은 대체 텍스트를 표시합니다:

상해화화공원 - 풀밭

또한, 사용자가 이미지 위에 마우스를 가져다 올 때, 최신 브라우저는 설명적인 텍스트를 표시하는 텍스트 박스를 표시합니다. 아래의 코드는 alt 속성에 설명적인 텍스트를 추가합니다:

아래의 사진에 마우스를 가져다 올 수 있습니다. 해당 효과를 확인해 보세요:

상해화화공원 - 풀밭

빨간 원 안의 텍스트 박스는 사용자가 이미지에 마우스를 가져다 올 때 IE7 브라우저가 표시하는 효과입니다:

상해화화공원 - 풀밭

예제 2

대체 텍스트를 지정한 이미지:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

직접 테스트해 보세요

문법

<img alt="텍스트">

속성 값

설명
텍스트

이미지의 대체 텍스트를 지정합니다.

alt 텍스트 사용 원칙:

  • 이미지에 정보가 포함되어 있으면 - 이미지를 설명하는 alt를 사용하십시오
  • a 요소 내에 이미지가 있으면 - 목표 링크를 설명하는 alt를 사용하십시오
  • 이미지가 장식용만이면 - alt=""를 사용하십시오

브라우저 지원

크롬 에지 파이어폭스 사파리 오퍼라
크롬 에지 파이어폭스 사파리 오퍼라
지원 지원 지원 지원 지원