[css] IR 기법과 IS 기법

 

IR( image replacement )

대체 텍스트 for 웹접근성.

img 태그 내의 alt 속성과 같다.

하지만 백그라운드이미지로 넣는 경우에는 대체텍스트가 필요.

 

text-indent:-9999px 등 여러가지 방법이 있으나 최신 방법은 아래와 같다.

(H5BP-html5 boilerplate, 부트스트랩에서 사용중)

.sr-only {
    position: absolute; /* position: absolute/fixed 에서만 clip 속성 작동 */
    margin: -1px; /* 부트스트랩에선 안씀 */
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden; /* overflow: visible 이면 clip 속성 작동 안됨 */
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%); /* H5BP에선 안씀 */
}

 

 

IS ( image spriting )

로딩 속도를 줄이고 간편하게 관리하기 위한 방법.

여러 이미지를 모아 하나의 파일로 만들고 bg-position 등으로 조정.

https://gia-world.github.io/project3/#snsWrap

( sns 이미지 부분 )

 

 

 

참고자료

https://haneunbi.github.io/2020/06/01/css-ir/

[CSS] IR(Image Replacement) 기법

https://m.blog.naver.com/eirene100999/221686480420

경력 > 2. 웹퍼블리셔 :: [초급] IR기법과 IS기법의 정의와 예제를 작성하라

https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/

See No Evil: Hidden Content and Accessibility