본문 바로가기

Tip/Web Accessibility

clip 이용 텍스트 숨김처리

.blind
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px


border: 0; padding: 0;을 추가하여 상속되거나 적용될 수 있는 스타일을 삭제하여 안전하게 사용한다. margin: -1px;를 사용하여 부모요소 밖으로 위치시킨다. ​



레이아웃에 영향을 끼치지 않도록 position: absolute;

스크린 리더가 읽을 수 있도록 width: 1px; height: 1px;

눈에 보이는 부분을 제거 clip: rect(1px, 1px, 1px, 1px);

clip과 overflow의 차이점은 같은 박스를 대상으로 적용하지 않는다. 

clip은 content box에. overflow는 border box(+padding)에.



http://witinweb.com/post/139327470592/%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EC%A7%80%ED%82%A4%EB%A9%B0-%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A5%BC-%EC%88%A8%EA%B8%B0%EB%8A%94-%EB%B0%A9%EB%B2%95