[CSS] visually-hidden

label, input처럼 함께 있어야하는 짝꿍 요소이지만 화면에서 안보이게 하고 싶을 때

- display:none처럼 화면에서 완전히 없애거나

- visibility: hidden처럼 자리 차지하지 않고

 

화면에 존재는 하지만 공간 배정을 없앰

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

 

 

 

 

* 참고

github visually-hidden

 

2023.04.17