CSS Reference

CSS IR 기법

IR 기법은 이미지 대체 텍스트 제공을 위한 CSS 기법으로, 다양한 CSS 기법을 활용하여 이미지 대체 텍스트를 제공할 수 있습니다.

Phark Method의 약자로, 의미있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다. 이미지로 대체할 엘리먼트에 배경 이미지를 설정하고, 글자는 text-indent를 이용하여 화면 바깥으로 빼어내 보이지 않게 하는 방법을 사용합니다.

.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;
    padding: 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;
}