[bootstrap] 부트스트랩 – 이미지 대체

요즘은 이미지를 거의 사용하지 않고 아이콘도 모두 폰트 아이콘으로 대체되고 있는데요.

로고만은 이미지로 사용할 수밖에 없습니다.
대부분 사이트에서 로고가 위치한 곳에 사이트 제목도 추가하게 되는데, 이 제목을 보이지 않게 하기 위해 예전에는 text-indent:-9999px와 같이 설정하곤 했습니다. 그런데 이 방법은 글자를 오른쪽에서 왼쪽으로 쓰는 아랍권 국가에서는 하단에 수평 스크롤 바가 생성되기 때문에 적절하지 않은 방식입니다. 이를 위해 사용할 수 있는 선택자가 .text-hide입니다.

<h1 class=”text-hide“>제목</h1>

 

h1 태그에 대해서 CSS로 배경 이미지로 로고를 설정하면 글자는 보이지 않고 로고만 나타납니다. 사이트 이름이 투명 처리돼서 보이지는 않지만 검색 엔진은 글자를 알아보므로 검색 엔진 최적화에 필요합니다.