Whiteship's Note

Chapter 14. Image Replacement

View/HTML/CSS : 2008.03.31 14:01


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;

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

'View > HTML/CSS' 카테고리의 다른 글

[IBM DW] HTML5 navigator  (0) 2010.07.06
[CSS] 탭 만들기  (2) 2009.05.26
[CSS] 링크 적용 범위 넓히기, 롤오버 효과 주기  (0) 2009.05.22
[CSS]그라데이션 배경 사용하기  (2) 2009.05.22
XPath Path Expression 문법  (0) 2009.05.15
Chapter 14. Image Replacement  (0) 2008.03.31
Chpater 13. Styling Text  (0) 2008.03.31
Chapter 10. Applying CSS  (0) 2008.03.26
Chapter 9. Minimizing Markup  (0) 2008.03.23
Chapter 8. More Lists  (0) 2008.03.23
Chapter 7. Anchors  (0) 2008.03.23
top




: 1 : 2 : 3 : 4 : 5 : 6 : 7 : 8 : 9 : 10 : ··· : 18 :