CSS Reference

CSS ir효과

background 속성으로 이미지를 표현할 때 가상으로 대체 문자를 만들어주기 위해(웹 표준 준수 목적) ir효과를 사용한다.

의미있는 이미지의 대체 텍스트를 제공하는 경우 사용하며 이미지를 대체할 요소를 배경이미지로 설정하고 텍스트는 text-indent를 이용하여 화면 바깥으로 빼내어 보이지 않게 한다.

예시

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

의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 사용하며 이미지를 대체 할 요소에 배경이미지를 설정하고 텍스트는 span 태그로 감싼 후 z-index를 이용하여 보이지 않게 한다.

예시

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

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

예시

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