100% 클릭 영역을 위한 슬라이딩 도어 코드

표준을 공부하는 친구들은 대개 학습 과정에서 CSS 미닫이 기술을 접하게 될 것입니다. "CSS의 미닫이 기술"을 접해 본 적이 없거나 아직 접하지 않았다면 이 기사를 읽어보셨을 것입니다. 아직 읽지 않았습니다. 위 기사를 읽었거나 내용을 잊어버렸더라도 상관없습니다. 위 기사 링크를 클릭하면 먼저 내용을 이해하거나 복습할 수 있습니다.

'CSS의 슬라이딩 도어 기술' 기사의 슬라이딩 도어 예시에서 주의 깊게 실험해 보면 링크 영역에 클릭할 수 없는 9픽셀 사각지대가 있다는 것을 발견할 수 있으며, IE에서는 텍스트 부분만 클릭할 수 있으며 전체 버튼 블록은 클릭할 수 없습니다. 우리가 기대할 수 있는 것은 전체 버튼 블록을 클릭할 수 있고 사각지대가 허용되지 않는다는 것입니다.

그럼 어떻게 달성해야 할까요? 몇 가지 해결책을 함께 논의해 보겠습니다.

우선 편의를 위해 "CSS의 슬라이딩 도어 기술"에서 코드를 이동해 보겠습니다.
XHTML 부분:

<div id="header">  
  <ul>  
    <li><a href="#">Home</a></li>  
    <li id="current"><a href="#">News</a></li>  
    <li><a href="#">Products</a></li>  
    <li><a href="#">About</a></li>  
    <li><a href="#">Contact</a></li>  
  </ul>  
</div>

CSS 부분:

#header {  
  float:left;  
  width:100%;  
  background:#DAE0D2 url("bg.gif") repeat-x bottom;  
  font-size:93%;  
  line-height:normal;  
}  
#header ul {  
  margin:0;  
  padding:10px 10px 0;  
  list-style:none;  
}  
#header li {  
  float:left;  
  background:url("left.gif") no-repeat left top;  
  margin:0;  
  padding:0 0 0 9px;  
}  
#header a {  
  float:left;  
  display:block;  
  background:url("right.gif") no-repeat right top;  
  padding:5px 15px 4px 6px;  
  text-decoration:none;  
  font-weight:bold;  
  color:#765;  
}  
/* Commented Backslash Hack  
   hides rule from IE5-Mac \*/  
#header a {float:none;}  
/* End IE5-Mac hack */  
#header a:hover {  
  color:#333;  
}  
#header #current {  
  background-image:url("left_on.gif");  
}  
#header #current a {  
  background-image:url("right_on.gif");  
  color:#333;  
  padding-bottom:5px;  
}