이미지 테두리 롤오버 효과 갭 발생 해결하는 방법

썸네일 이미지를 가로 세로로 배열해 놓고, 마우스 오버시 이미지 테두리를 생성시켜주는 롤오버 효과를 한 두번쯤은 적용해 보았을 것이다. 많은 경우 기본 이미지와 롤오버 이미지(테두리 생성 이미지) 두개를 별도로 제작하여 스크립트로 처리하는 경우를 볼 수 있는데, 조금만 더 고민을 해 보면 CSS만을 이요해서 간단히 구현해 볼 수 있다.

HTML Markup:

view plaincopy to clipboardprint?

1. <ul>  
2.     <li><a href="#"><img src="icon_4.png" width="44" height="44" alt="Smile" /></a></li>  
3.     <li><a href="#"><img src="icon_5.png" width="44" height="44" alt="Together" /></a></li>  
4.     <li><a href="#"><img src="icon_6.png" width="44" height="44" alt="Bomnun" /></a></li>  
5.     <li><a href="#"><img src="icon_7.png" width="44" height="44" alt="Jamjam" /></a></li>  
6. </ul>  

<ul> <li><a href="#"><img src="icon_4.png" width="44" height="44" alt="Smile" /></a></li> <li><a href="#"><img src="icon_5.png" width="44" height="44" alt="Together" /></a></li> <li><a href="#"><img src="icon_6.png" width="44" height="44" alt="Bomnun" /></a></li> <li><a href="#"><img src="icon_7.png" width="44" height="44" alt="Jamjam" /></a></li> </ul>

Default CSS:

view plaincopy to clipboardprint?

1. /* Init */  
2. ul { margin: 0; padding: 0; list-style: none; }   
3. ul li a { border: 0; }   
4. ul li a img { border: 0; }   
5.   
6. ul li, ul li a { float: left; }   
7. ul li a:hover { border: 2px solid red; }  

/* Init */ ul { margin: 0; padding: 0; list-style: none; } ul li a { border: 0; } ul li a img { border: 0; } ul li, ul li a { float: left; } ul li a:hover { border: 2px solid red; }

이처럼 CSS를 작성한다면 아마도 롤오버 효과를 얻을 수 있을 것이다. 하지만 테두리 두께 만큼 이미지와 이미지가 서로 밀리면서 갭이 발생하는 것을 볼 수 있고, 가로 세로 2,3층으로 설계된 이미지 그룹이라면 문제는 생각보다 심각하다. 다음과 같이 해결해 보자.

Solution:

view plaincopy to clipboardprint?

1. /* Solution */  
2. ul li, ul li a { float: left; overflow: hidden; }   
3. ul li a:hover { border: 2px solid red; }   
4. ul li a:hover img { margin: -2px; }  

/* Solution */ ul li, ul li a { float: left; overflow: hidden; } ul li a:hover { border: 2px solid red; } ul li a:hover img { margin: -2px; }

롤오버 된 링크 요소의 이미지 요소의 마진값을 음수로 처리하고, 링크 요소 overflow 속성에 hidden 값을 지정해 주면 간단히 해결이 된다.

CSS Tricks에서는 한단계 더 나아가 안쪽 테두리가 아닌, 바깥쪽 테두리에 대한 CSS 해결도 제시하고 있다.

view plaincopy to clipboardprint?

1. ul li, ul li a { float: left; }   
2. ul li a { margin: 3px; }   
3. ul li a:hover { outline: 2px solid red; }  

ul li, ul li a { float: left; } ul li a { margin: 3px; } ul li a:hover { outline: 2px solid red; }

하지만 이 방법은 브라우저 호환성을 확보할 수 없다. 링크 요소의 롤오버 효과로 지정된 outline 속성은 IE 7 이하에서는 지원되지 않기 때문이다. CSS Tricks의 데모는 여기서 볼 수 있다.

출처:http://blog.clearboth.org/35