본문 바로가기
CSS

IR효과

by SyuMay 2022. 8. 22.
728x90

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;
}
728x90
반응형

'CSS' 카테고리의 다른 글

이미지스프라이트  (4) 2022.08.22
백그라운드  (4) 2022.08.22
애니메이션  (6) 2022.08.18
미디어쿼리  (7) 2022.08.15
CSS 기본문법  (5) 2022.08.15

댓글


자바스크립트 사진

JavaScript

자세히보기