z-index를 이용한 Image Replacement기법

One Web Developer’s Haven에 소개된 z-index를 이용한 Image Replacement기법이다.(via 覚え書き@kazuhi.to) 이미지 off의 상태에서도, CSS off 상태에서도 텍스트는 잘 표시되지만 역시 span태그가 신경 쓰인다. 그래도 혹시 IR기법을 활용하고자 하시는 분은 참고하시길 바란다.





Top-Level Text

코드는 대략 이런식으로 구성되어 있다. 핵심은 body요소에 z-index:1을 주고(z-index프로퍼티는 position프로퍼티에 “relative”, “absolute”, “fixed” 등 “static” 이외의 값을 가지고 있는 요소에만 적용되는 점에 주의) 적용하고자 하는 요소에 background-image로 이미지를 지정하고 텍스트는 span으로 둘러싼다. span에 z-index:-1을 적용함으로써 텍스트가 background-image의 뒤로 숨게된다(참조 샘플 페이지).

머리속에 background-image는 페이지의 가장 뒤에 있는 요소라는 고정관념이 자리하고 있었는데 이 소스를 보고 깜짝 놀랐다. 역시 어떤일에든 유연한 사고가 필요한 것 같다.

Posted on 2006-09-24 Sunday 02:28:34 by nmind
Trackback: http://www.nmindplus.com/2006/09/24/z-index/trackback/

7 Responses to “z-index를 이용한 Image Replacement기법”

Comments Feed

정찬명 Says:
2006-09-24 at 03:44:01
새로운 IR 기법 하나를 배우긴 했는데.. span 태그.. 신경쓰이는 것보다 심각한 문제 아닌가요?
nmind Says:
2006-09-24 at 13:23:10
논리적인 의미를 지니지 못한 span태그는 가능한 한 사용하지 않는 편이 좋겠죠. 이 소스에 사용된 span태그는 어떻게 보아도 시각적인 설정을 위한 지정이기 때문에 그다지 바람직하다고는 할 수 없지만 그걸로 액세시빌리티의 향상을 가져온다면 어쩔 수 없는 경우에 사용 할 수도 있지 않을까 생각합니다.
후리자 Says:
2006-09-26 at 15:51:33
…..
식으로 사용한다면 깔끔하고 기분좋게 사용할 수 있을 것 같네요~!
nmind Says:
2006-09-26 at 21:56:25
세상에는 정말 머리 좋은 사람 천지인 것 같습니다. 더 노력해야죠:-)
정찬명 Says:
2007-05-03 at 12:23:48
이팁, 처음에 무척 망설였는데 적절하게 응용해서 사용하니 좋네요 ^^;
한 가지 사실을 발견했는데 부모 박스가 overflow:hidden 되어 있으면 z-index 의 음수값이 적용되지 않더라구요.. 삽질 끝에 발견했답니다.. ㅎㅎ
nmind Says:
2007-05-03 at 15:07:32
그런 문제가 있었군요! z-index를 그다지 많이 사용하지 않아서 잘 모르고 있었습니다.
좋은 정보 감사합니다:-)
겨미♡웹 » 정보로서가 아닌 정보를 꾸며주기 위해 사용하는 <img> 태그, 그리고 이미지 대치법(Image Replacement) - Miya.pe.kr Says:
2008-04-22 at 02:30:36
[...] 표시될 수 있는 충분한 공간이 확보되지 않으면 무용지물이 될 수 있다. z-index를 이용한 이미지 대치법도 하나의 방법인데 대치할 요소의 부모 요소에 배경색이 들어가있거나 한 [...]

NmindPlus