IR 효과(기법) 알아보기

IR 효과 주기

웹 접근성을 향상시킬 수 있는 IR효과에 대해 알아봅시다. IR효과란 무엇인지, css로 IR효과를 작성하는 방법을 알아봅니다.

IR 효과(기법)란?

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

*css에서 ir 효과 주는 법*
.ir {
    display: block;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

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

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