.sr-only 스타일링

 

display:none을 해버리면 편할 것 같지만

display:none의 치명적 단점은 

screen reader마저도 저 요소가 존재하지 않는 요소라고 생각해서

읽어주지 않는다.

그럼 sr-only를 만드나 마나...하게 됨

 

 

 

.sr-only{
	position:absolute;
	z-index:-100;
}

position:absolute를 주면 아예 집나간 자식이 되서 부모 요소는 이 친구가 어디 갔는지 모르고 형제들도 모름..

그리고 z-index를 줘서 아주 아래로 꺼져버리게(.. )만들었다.

 

이것만으로 부족하다고 생각이 된다면

.sr-only{
	position:absolute;
	z-index:-100;
	width:1px;
	height:1px;
	overflow:hidden;
	opacity:0;
}
	

 

 

width나 height 둘 중 하나의 값이 0이면 스크린 리더가 읽어주지 않는다.

 

overflow:hidden 

-> width 1px, height 1px를 넘어서는 컨텐츠는 다 잘라버리겠다 (1px 영역에서 벗어나는 건 다 잘라버림)

 

opacity:0;

-> 투명도도 아예 0으로