IR효과

IR 효과

img태그가 아닌 방법으로 이미지를 표현할 경우,
이미지가 로딩되지 않을때 나타낼 수 있는 대체 텍스트를 표시할 수 없습니다.
때문에 웹 접근성 향상을 위해 숨김 텍스트를 만들어가상으로 alt태그와 같은 효과를 주는 css 작성 기법입니다.
IR 효과를 사용하게 되면, 웹 접근성을 떨어트리지 않으면서도 검색 엔진 최적화로부터 좋은 효과를 볼 수 있습니다.

IR효과 방법

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

/* 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */
.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* 대체 텍스트가 아닌 접근성 향상을 위해 숨김 텍스트를 제공할 때 */
.ir_wa {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}