CSS로 탭 내비게이션 구현하기…

오랫만에 웹페이지 코딩을 할 일이 있었는데, 탭 내비게이션이 필요한 상황이라 html + css로 탭 내비게이션을 구현해보았습니다.

block 레벨 엘리먼트에 position 속성을 주게 될 경우 새로운 context가 시작되게 되므로 그 하위 엘리먼트에서 position: absolute를 사용할 경우 position을 속성을 지정해둔 상위 엘리먼트의 위치 기준으로 위치가 지정된다는 사실을 이용하는 방법입니다.

border만을 활용하다 보니 디자인 상으로 사소한 문제가 있지만 span 등을 활용할 경우 충분히 이쁘게 만들 수도 있을거라 생각합니다.

결과: http://mytears.org/resources/mysrc/html+css/css-navi.html

다만 absolute를 활용하다보니 부모 엘리먼트의 크기가 하위 엘리먼트에 맞춰 확장되지 않기 때문에 높이를 강제로 고정해야하는 문제가 있는데, 이 부분을 해결하는 것도 고민해봐야겠네요.

확인해본 결과 IE6에서는 li에만 float을 주게 될 경우 h2 때문인지 li의 너비가 100%로 설정되는 문제가 있었습니다. 그걸 피하기 위해 h2에도 float: left를 지정해줘야 했으며, position: relative가 제대로 역할하지 못하는 버그를 해결하기 위해 *zoom: 1;(css hack)을 추가해줘야 했습니다.

덧: IE6에서는 li:hover를 제대로 처리하지 못하므로 약간의 자바스크립트를 이용해야할 것으로 보입니다. 그리고 IE5.5에서 sub contents의 여백이 조금 다르게 보이는 문제가 있네요.

Published by

One thought on “CSS로 탭 내비게이션 구현하기…”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">