[접근성] 텍스트 숨김

.blind{

    overflow:hidden;

    position:absolute !important;

    width:1px !important;

    height:1px;

    padding:0;

    margin:-1px;

    clip:rect(1px, 1px, 1px, 1px);

    clip-path:inset(50%);

    border:0;

}

 

overflow: hidden

> overflow된 콘텐츠 숨기기

 

position:absolute

> clip 속성은 position 값이 fixed, absolute 일 때만 사용 가능하고 레이아웃에 영향이 안가도록

 

width: 1px, height: 1px

> 스크린리더기가 읽을 수 있는 최소한의 사이즈

 

padding:0, border:0

> 상속되거나 적용될 수 있는 스타일 제거

 

margin: -1px

> 부모 요소 밖으로 위치

 

clip: rect(1px, 1px, 1px, 1px) or clip: rect(0, 0, 0, 0)

> top과 bottom, left와 right가 같은 값이면 요소가 숨겨짐

 

clip-path: inset(50%)

> clip 속성이 css2에서 사용되던 속성이기 때문에, 최신 표준 사용