css 14. IR 기술

IR (Image Replacement) 기술

웹페이지상 사용자입장에서는 볼 수 없지만,

스크린리더나 브라우저를 위해 텍스트를 기재하는 방법이다.

웹접근성 향상과 SEO최적화 하는데 영향을 끼치므로 중요한 개념이다.

 

이전에는 웹페이지 문서 구조상 필요한 제목이지만,

화면상에는 나타날 필요가 없을 때 아래 속성을 사용했었다.

visibility:hidden

하지만 공부해보니 위와 같은 속성은

스크린리더가 읽어주지 않고 무시하기 때문에

웹접근성을 감소시켜 사용해서는 안되는 속성이었다.

 

위 속성을 대신해서 아래와 같은 코드를 사용 할 수 있다.

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

 

 

위 코드는 IR 기술의 여러가지 종류 중 하나이다.

이 코드의 작동방식에 대해 설명하자면, 

 

1. 숨기고자 하는 텍스트의 가로 세로값을 최솟값인 1px로 지정한 다음

2. 클립 속성으로 사용자입장에서 텍스트를 안보이게 자른 후

3. 1px로 (안보이는) 텍스트가 자리를 차지하는 문제는 position absolute를 활용해서

    텍스트를 웹페이지상에서 붕 띄어버린다.

4. 숨겨지지 않을 때를 대비해서 overflow:hidden속성을 추가한다.

위 코드 외 다양한 IR 기술이 있으므로, 상황에 따라 적절하게 활용 할 필요가 있다.