a태그 css로 text숨기기

css로 text를 숨기는 방법은 여러가지가 있다.

 

웹접근성 및 스크린리더를 생각해야하기 때문에 사용하는 경우가 많은거 같았다.

(특히 로고같은 경우 a태그를 사용기 때문에!)

 

우선 텍스트를 숨기기는 방법중에서는

display : none, hidden

opacity: 0

요소의 위치를 안드로메다로 보내는방법...

요소의 크기를 줄이는 방법. 등등 여러가지 방법이 있지만

 

그중에서 이방법이 가장 간편한거 같다.

여기서 요소의 크기를 줄이는 방법으로 하게되면 인라인요소이다보니 영영이 아예 사라져버린다.

 

만약 배경이미지를 넣거나 영역을 살리고 싶다면?

  
  display: block;
  font-size: 0;
  
  width: 100px;
  height: 100px;

이렇게 css를 작성하게 되면 지정한 영역은 살아있고 text만 숨겨지는걸 볼 수 있다.