Fahrner Image Replacement (FIR)

• CSS를 적용해서 이미지로 교체할 텍스트를 표시한다.

<h1 id="fir">Fahrner Image Replacement</h1>

• 텍스트를 제거해야 하니까 <span>으로 감싸서 제거한다.

<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

#fir span {

  display: none;

  }

• fir css를 사용해서 백그라운드에 이미지로 만든 글자를 적용한다.

#fir {

  width: 287px;

  height: 29px;

  background: url(fir.gif) no-repeat;

  }

• 장점: css를 지원하지 않는 브라우저에서는 그냥 보통 텍스트라도 보여줄 것이다.

• 단점: display가 비주얼하게 글자를 숨기는 것 뿐만 아니라, 완전히 없애드릴 수도 있다. <span>이라는 별의미없는 태그가 필요하다. 이미지를 꺼버리는 사용자들에게는 난감하다.

Leahy/Langridge Image Replacement (LIR)

• 별의미 없는 <span> 엘리먼트 없이 텍스트를 이미지로 바꾸기

• 엘리먼트의 높이를 0으로 만들고 교체할 이미즤 크기만큼 padding-top을 설정한다.

<h1 id="lir">Leahy/Langridge Image Replacement</h1>


#lir {

  padding: 90px 0 0 0;

  overflow: hidden;

  background: url(lir.gif) no-repeat;

  height: 0px !important; /* for most browsers */

  height /**/:90px; /* for IE5/Win */

  }

• Screen-reader 애플리케이션이 텍스트를 읽을 수 있다.(display 속성을 사용하지 않아서.)

• 이미지를 꺼두고 CSS만 켜두는 사람에게는 아무것도 안보인다.

• IE5/Windows 브라우저를 위해서 Box Model 핵을 사용해야 한다.

The Phark Method

• 글자 들여쓰기를 엄청많이 해서 페이지에 존재하고 있지만, 보이지는 않도록 한다.

<h1 id="phark">The Phark Method</h1>

#phark {

  height: 26px;

  text-indent: -5000px;

  background: url(phark.gif) no-repeat;

  }

• 간단해서 좋아보이지만 여전히 이미지를 꺼두면 안 보인다.