ir 효과 / ir 기법

CSS Image Replacement 기법 (ir)

Image Replacement는 웹 페이지에서 텍스트를 이미지로 대체하는 방법입니다. 이 기법을 사용하면 시각적으로는 이미지가 표시되지만, 코드 상에는 여전히 텍스트가 존재하여 검색 엔진이 콘텐츠를 인식할 수 있게 합니다.

사용 이유

• 접근성: 스크린 리더를 사용하는 시각 장애가 있는 사용자들이 텍스트를 읽을 수 있습니다.
  
• SEO: 검색 엔진이 텍스트를 인덱싱할 수 있어, 이미지만 사용했을 때보다 SEO 성능이 향상됩니다.
  
• 유지 관리: 텍스트 기반으로 콘텐츠를 관리하기 때문에 내용 업데이트가 용이합니다.
  

1. HTML/CSS를 사용한 기본적인 방법

<!-- HTML -->
<div class="logo">
  Company Name
</div>

/* CSS */
.logo {
  width: 200px; /* 로고 이미지의 너비 */
  height: 100px; /* 로고 이미지의 높이 */
  background: url('logo.png') no-repeat;
  text-indent: -9999px; /* 텍스트를 화면 밖으로 밀어냄 */
}

이 방법은 text-indent 속성을 사용해 텍스트를 화면 밖으로 이동시키는 방식입니다. 사용자에게는 보이지 않지만 검색 엔진과 스크린 리더는 여전히 텍스트를 읽을 수 있습니다.

CSS의 font-size: 0 방법

<div class="logo">Company Name</div>

.logo {
  font-size: 0;
  background: url('logo.png') no-repeat;
  width: 200px;
  height: 100px;
}

주의사항

이미지 교체 기법은 접근성과 SEO를 고려하여 신중하게 사용해야 합니다. 너무 자주 사용하면 웹 사이트의 로딩 시간에 영향을 줄 수 있으며, 일부 방법은 더 이상 최신 웹 표준을 준수하지 않을 수 있습니다. 따라서 사용하기 전에 현재의 웹 표준과 접근성 지침을 검토하는 것이 좋습니다

다음시간에 계속…