[css] text-indent를 이용하여 background 이미지만 보여주기

css를 이용하여 로고는 보여지고 텍스트는 읽혀질 수 있게 활용
메인 로고와 음성으로 보여져야할 이미지에 활용

<a href="#" class="logo">
 로고명
</a>
           

✅html문서
1) <a> 태그를 이용하여 로고 클릭 시 home으로 돌아갈 수 있게 제작
2) <a> 태그에 로고나 홈페이지명을 작성하여 음성인식 시 정보를 알 수 있음

.logo{
 background: url(/로고파일링크) no-repeat;
 text-indent: -9999px;
 overflow: hidden;
 display: block;
 }

✅css문서
1) background에 로고 파일을 불러온 후 widht, height, background-position, background-size 등을 조절해준다
2) 텍스트를 멀리 밀어 보이지 않게 하기 위해 text-indent 값을 -9999px을 준다
3) 보이지 않는 요소에 대해 overflow: hidden처리를 해준다
4) 해당 속성은 block요소에만 적용되기 때문에 inline요소인 <a> 태그를 block요소로 바꿔준다

✔️ 적용이 안될 시 블록 요소인지 인라인 요소인지 체크