CSS IR 효과

웹 접근성을 준수하기 위해 이미지 사용 시 대체 텍스트를 추가해야 한다

1. Phark method

의미 있는 이미지의 대체 텍스트가 제공될 경우 사용한다
text-indent 속성을 이용해 텍스트를 화면 바깥쪽으로 빼낸다(-9999px만큼 내어쓰기)

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

2. WA IR

의미 있는 이미지의 대체 텍스트로 이미지가 없더라도 대체 텍스트를 보여줄때 사용한다
텍스트는 span 태그로 감싸고 z-index 값을 -1로 설정해 화면에 보이지 않게 처리한다

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

3. Screen out

대체 텍스트가 아닌 접근성을 위해 텍스트를 숨겨야 할때 사용한다

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