in CSS

이런 황당한 시츄에이션이..

CSS 2.1는 Pseudo-Class Selectors(사이비 클래스 선택자)를 지원하고 있다. 대표적으로 링크에 자주 사용하는 :link, :hover, :visited 가 있으며, 인풋에 사용하는 :focus와 :active 가 있다.

이 녀석들을 잘 활용하면 다이내믹한 사이트를 쉽게 만들 수 있지만, 현재 IE(버전 6 이하)에서는 a(링크에 사용하는 놈)에서만 이녀석들을 지원하고 있기에 현실적으로 사용하기 어렵다.

이중에서 가장 많이 사용하는 사이비 클래스 선택자가 hover인데, 현재로써는 이에 대한 제대로된 Hack을 찾기 어렵다. (ie7 스크립트가 해결해준다는 소문은 있지만, ie7을 이용해서 제작된 사이트를 방문한 경험이 없음)

오늘 웹서핑 중에 :hover를 이용한 배경색을 조절하는 사이트를 발견했다. 지금까지 확인했던 모든 사이트들이 ie에서는 이런 :hover 기능이 무력화되곤 했는데, 이번 사이트는 달랐다.

이 미묘한 컬러의 변화를 보라.

스타일부스터라는 사이트인데, IE의 마진과 관련된 핵을 사용하는 것 외에 특별히 다른 스크립트를 사용하지 않았음에도 불구하고 IE에서 .클래스이름:hover를 랜더링하고 있다.

이 것은 충분히 놀라운 사실이다. 특별히 hack을 사용하지 않고도 ie의 :hover 문제를 해결할 수 있다는 것은, 에릭 마이어의 CSS Drop Down Menus (well with javacript for IE)을 구현할때 js를 사용할 필요도 없어지기 때문이다. (이와 관련된 내용은 A List Apart에도 소개되고 있음)

혹시라도 이 사이트에서 :hover 관련 해법을 발견한 분이라면, 꼭 답글로 제게 방법을 가르쳐 주시면 감사~하겠습니다. 🙂

댓글 남기기

  1. 비밀을 알아냈습니다.
    일단 후니님 미워요. ㅠ_ㅠ

    정확히 이해되지는 않지만 vx_submit.htm 에서 아래의 파일을 액세스 하려는 사실을 알았습니다.

    http://www.styleboost.com/docs/csshover.htc

    이 파일을 다운 받아서 에디터로 열어보니 JScript 였습니다.

    JScript를 썼다는 사실을 알고 나니까 더이상 조사해보고 싶은 생각이 들지 않아서 그냥 손 놨습니다.

    저도 처음에는 js 없이 구현된 것인줄 알고 정말 열심히 분석했는데 허무하네요.

    후니님 미워요 ㅠ_ㅠ

  2. A2님/ 발견하셨군요. 사실 저도 이글을 다 쓸때 쯤 발견했답니다. 처음엔 관련 css만 찾아보고 글을 썼었는데, 다시 css의 첨부터 훝어보니 htc라는 비헤비어를 불러오더라구요.

    http://www.xs4all.nl/~peterned/csshover.html 라는 곳에서 이 htc(ie 전용 스크립트)를 배포하고 있더라구요. 이거 생각보다 유익한 스크립트인 거 같습니다.

    A2님 귀찮게 해드려서 죄송해요~ ^^;

  3. 스타일부스트의 common.css 파일 11번 라인을 보시면 body에 csshover.htc 파일이 behavior 속성으로 지정되어 있음을 확인하실 수 있습니다.

    behavior: url(/docs/csshover.htc);

    위 파일을 계정에 올리신 뒤, styleboost의 경우와 같이 html이나 body 태그에 css 속성으로 추가해주시면 :hover, :active 선택자들에 한해서는 자유롭게 사용하실 수 있겠습니다. 다만 behavior 속성은 IE에서만 인식되는 비표준 속성이기 때문에 css validation을 통과하지 못한다는 문제가 있으니 그 점은 감안하셔야 할 듯 합니다.

    저도 방금 막 알아본 것인지라 자세히 알고 있지는 못하니, 아래 문서도 함께 참고해주시면 감사하겠습니다. htc파일 링크도 함께 걸어둡니다. 🙂

    http://www.xs4all.nl/~peterned/csshover.html
    http://www.xs4all.nl/~peterned/htc/csshover.htc

    * 홈페이지는 아직 제작중인 터라, 부득이하게 익명으로 답글을 남겼습니다.

  4. 헉; 요 잠깐 사이에 중복글이 되었네요. 중복된 내용 올려드려서 죄송합니다. 거슬리시면 위 덧글과 함께 삭제해주셔도 되겠습니다 🙂