IR 기법 텍스트 숨기기

img 태그에서 대체 텍스트를 주기 위한 방법으로 alt 속성을 이용하는데 대체 텍스트가 너무 길 경우에는 따로 텍스트 요소를 추가 한 후 스크린 리더가 읽을 수 있게는 해놓고 숨기게 하는 방법을
IR(Image Replacement)기법이라고 한다.

1. 나쁜 방법

visibility: hidden;
display: none;

width:0;
height:0;
font-size: 0;
line-height: 0;

처럼 요소를 아예 없애버리면 스크린리더가 읽을 수 없다.

2. So So한 방법

text-indent: -9999px;

텍스트를 화면 밖으로 날려버리는 방법이 있는데
레아이웃의 크기가 그만큼 많이 잡힌다는 측면에서 성능적인 문제가 발생한다.

3. Best

 position: absolute;
 width:1px;
 height:1px;
 margin:-1;
 clip: rect(0,0,0,0,);
 overflow: hidden;

position: absolute는 부모를 기준으로 absolute한 위치 !
clip: rect()는 top,right,bottom,left에서 정한 위치만 보여주는 값 !