이걸 안보이게 할려면 <a onfcous="this.blur();"> 와 같이 해주면 되죠.
그럼 이걸 CSS에서 할수는 없을까요?
이런 의문을 가지고 구글, 네이버를 검색하면 다음 소스를 쉽게 봅니다.
a {
selector-dummy:expression(this.hideFocus=true);
}
</style>
이걸 넣으면 되죠. 이야~~~ 그렇군! 하고는 다른사람에게도 열심히 가르쳐 줍니다.
(그래서 네이버에서 검색하면 이 CSS코드가 넘쳐나고 있죠.)
재미있는건, 위의 코드를 이렇게 바꾸어도 된다는 겁니다.
a {
test:expression(this.hideFocus=true);
}
</style>
뭔가 이상하죠?
selector-dummy 이 뭔가 명령언줄 알았더니 아닌가 봅니다.
이 CSS의 핵심은 expression 입니다.
expression 는 CSS에서 DHTML를 읽기/쓰기를 지원하는 확장 메소드입니다.
원래는 setExpression이라는 Method 이지만 (CSS가 아닌 DHTML에.), CSS Stype안에서 쓸때는 그냥 expression() 으로만 표현합니다.
쉽게 말하면, CSS안에서 Javascript를 사용할 수 있도록 지원하는 명령어입니다 ! !
그래서 놀랍게도 다음과 같은 CSS도 작동합니다.
a {
test:expression(alert('떠라~'));
}
</style>
이렇게 하면 그 페이지에 있는 <a>테그 수만큼 Javascript 경고창이 뜹니다.
이건 어떤가요?
<style>
a img {
test:expression(imgChang(this));
}
</style>
<script>
function imgChang(obj){
obj.onclick = function() {
obj.src = "bbbb.gif";
}
}
</script>
<a><img src=aaa.jpg></a>
페이지를 띄우고 이미지를 클릭하면 이미지가 aaa.jpg에서 bbb.gif로 바뀝니다.
왜냐? <a> 테그 안에 있는 <img>테그에 imgChang() 라는 Javascript 함수를 할당했기때문이죠.
CSS표준이 아닌 MS 확장 기능이기때문에 IE 에서만 작동된다는 문제가 있기는 하지만,
알고 있으면 어딘가 유용히 쓸 수 있는 기능이죠.
expression(this.hideFocus=true); 처럼 말이죠.
잘 만들어진 외부 샘플을 하나 참고 하겠습니다.
http://www.adp-gmbh.ch/web/css/expression.html
위 링크의 소스를 Html로 만들어 보면, 재미있는게 있습니다.
클래스가 적용된 객체의 left 픽셀값을 table_container 테이블의 가로 스크롤 이동값으로 한다.. 인데, 해보면 재미있습니다. ^^
MSDN DHTML Reference : setExpression
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setexpression.asp
샘플
http://www.adp-gmbh.ch/web/css/expression.html
Comments List
좋은 글 좀 퍼 갈게요 ^^
옆에 CCL을 확인하고 말하시는거죠?