ir 기법이란?
의미가 포함되어 있는 image를 배경으로 표현하고, 그에 대한 내용을 text로 기입하는 방법으로
스크린 리더기를 사용하는 사람들도 문자에 접근해서 이미지가 무슨 내용인지 이해할 수 있게 해주는
기법이다.
Park Method
이미지로 대체할 요소에 배경 이미지를 설정하고 내부의 대체될 텍스트는 text-indent를 이용하여
화면 바깥으로 -9999px 만큼 날려서 보이지 않게 하는 방법이다.
위의 방법은 스크린 리더기도 읽어주고 추가적인 태그를 사용 안 하는 장점이 있지만
성능 이슈가 발생할 수 있다.
WA IR
이미지로 대체할 요소에 배경 이미지를 설정하고 내부의 대체될 텍스트는 의미가 없는 span태그로 감싼 후
position 값을 주고 z-index: -1을 하여 화면에 안 보이게 하는 방법이다.
위 방법도 마찬가지로 position 속성 관련 성능 이슈가 발생할 수 있다.
Leahy/Langridge Method
이미지로 대체할 요소에 배경 이미지를 설정하고 padding-top을 이미지의 높이만큼 주어 대체될 텍스트를
밑으로 밀어내어 overflow: hidden을 사용하여 숨기는 방법이다.
'css' 카테고리의 다른 글
| css Grid 를 Lite 하게 알아보자 ! (0) | 2020.10.15 |
|---|---|
| css background 속성에 대해 알아보자! (0) | 2020.10.14 |
| css 레이아웃 끝판왕 flexible box 에대해 알아보자 ! (0) | 2020.10.06 |
| css animation 속성에 대해 알아보자 ! (0) | 2020.10.05 |
| css transition 과 transform 2d! (0) | 2020.10.04 |