[CSS] IR 기법

지난 글에서도 이야기했지만, 이미지를 볼 수 없는 상황을 대비하여 대체 텍스트를 제공해야 한다. 보통 ``img`` 태그의 ``alt`` 속성에 대체 텍스트를 작성한다.

<img src='...' alt='약간의 대체 텍스트'>

그런데

• 대체 텍스트가 일개 속성으로 적기에 너무 길다면?
• 이미지를 ``img`` 태그가 아니라 ``background``로 넣었다면?

마크업 태그로 대체 텍스트를 작성한다.

이 기법을 Image Replacement, 줄여서 IR이라고 한다. Investor Relationship 아니다.

배경 이미지?

아니, 그냥 배경 넣고 ``alt``도 넣으면 안 돼요?

배경 이미지가 계속 바뀌는 경우 ``alt``로 대응하기 쉽지 않다. 이런 경우에는 보통 이미지 바로 다음에 ``p`` 또는 ``span``으로 대체 텍스트를 작성한다.

<div>
    // 어떤 태그
    <span class="blind">어떤 대체 텍스트</span>
</div>

대체 텍스트가 너무 긴 경우?

이미지가 매우 클 경우, 대체 텍스트를 ``alt`` 안에 모두 작성하기 어렵다. 이런 경우에는 거의 완전한 HTML 문서를 만드는 방식으로 대체 텍스트를 작성한다. 물론 이미지가 보일 때는 대체 텍스트를 숨겨야 한다.