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 텍스트 사용 원칙:
|
브라우저 지원
크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
---|---|---|---|---|
크롬 | 에지 | 파이어폭스 | 사파리 | 오퍼라 |
지원 | 지원 | 지원 | 지원 | 지원 |