CSS - IR 효과

IR 효과

• IR 효과는 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다.
• 여러 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있다.

Phark Method

• 의미있는 이미지의 대체 텍스트를 제공하는 경우
• 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법

.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}

WA IR

• 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용
• 이미지로 대체 할 엘리먼트에 배경이미지를 설정하고 글자는 span 태그로 감싼 후 z-index:-1을 이용하여 화면에 보이지 않게 처리

.ir_wa {display: block; overflow: hidden; position: relative; 
            z-index: -1; width: 100%; height: 100%;}

Screen Out

• 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 할 때

.ir_so {overflow: hidden; position: absolute; width: 0; 
            height: 0; line-height: 0; text-indent: -9999px;}