Browse: Home / / z-index를 이용한 Image Replacement기법

z-index를 이용한 Image Replacement기법

By nmind on 2006/09/24 Sunday

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 in | 7 Responses

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

  1. 정찬명
    정찬명
    2006/09/24 Sunday at 03:44:01 | | Reply

    새로운 IR 기법 하나를 배우긴 했는데.. span 태그.. 신경쓰이는 것보다 심각한 문제 아닌가요?

  2. nmind
    nmind
    2006/09/24 Sunday at 13:23:10 | | Reply

    논리적인 의미를 지니지 못한 span태그는 가능한 한 사용하지 않는 편이 좋겠죠. 이 소스에 사용된 span태그는 어떻게 보아도 시각적인 설정을 위한 지정이기 때문에 그다지 바람직하다고는 할 수 없지만 그걸로 액세시빌리티의 향상을 가져온다면 어쩔 수 없는 경우에 사용 할 수도 있지 않을까 생각합니다.

  3. 후리자
    후리자
    2006/09/26 Tuesday at 15:51:33 | | Reply

    …..
    식으로 사용한다면 깔끔하고 기분좋게 사용할 수 있을 것 같네요~!

  4. nmind
    nmind
    2006/09/26 Tuesday at 21:56:25 | | Reply

    세상에는 정말 머리 좋은 사람 천지인 것 같습니다. 더 노력해야죠:-)

  5. 정찬명
    정찬명
    2007/05/03 Thursday at 12:23:48 | | Reply

    이팁, 처음에 무척 망설였는데 적절하게 응용해서 사용하니 좋네요 ^^;
    한 가지 사실을 발견했는데 부모 박스가 overflow:hidden 되어 있으면 z-index 의 음수값이 적용되지 않더라구요.. 삽질 끝에 발견했답니다.. ㅎㅎ

  6. nmind
    nmind
    2007/05/03 Thursday at 15:07:32 | | Reply

    그런 문제가 있었군요! z-index를 그다지 많이 사용하지 않아서 잘 모르고 있었습니다.
    좋은 정보 감사합니다:-)

  7. 겨미♡웹 » 정보로서가 아닌 정보를 꾸며주기 위해 사용하는 <img> 태그, 그리고 이미지 대치법(Image Replacement) - Miya.pe.kr
    겨미♡웹 » 정보로서가 아닌 정보를 꾸며주기 위해 사용하는 <img> 태그, 그리고 이미지 대치법(Image Replacement) - Miya.pe.kr
    2008/04/22 Tuesday at 02:30:36 |

    [...] 표시될 수 있는 충분한 공간이 확보되지 않으면 무용지물이 될 수 있다. z-index를 이용한 이미지 대치법도 하나의 방법인데 대치할 요소의 부모 요소에 배경색이 들어가있거나 한 [...]

Leave a Reply