JQuery를 이용한 겸손한 탭 메뉴 구현

이번에 사이트를 개편하면서, 탭 메뉴로 구성된 추천 글 목록을 추가했습니다. 제 사이트의 방문자 통계를 확인하니, 방문자들의 이동 경로가 1개의 글만 읽고 사이트를 떠나거나, 홈페이지로 이동하는 등 무척 기초적인 수준의 이용만 하고 있다는 것을 확인했기 때문입니다. 블로그의 글이 360개임에도 불구하고 1~2개 글만 보고 떠나는 걸 방치할 수 없었기에 추가한 콘텐츠입니다. 웹 사이트에서 탭 메뉴를 구현하기 위한 일반적인 방법은 Javascript의 onClick 이벤트를 이용하여, style의 display 속성을 조정하는 것입니다. 이때 보통은 HTML a 태그에 Javascript를 직접 사용하는 방식을 이용합니다. 때문에 이 방법은 구조적인 HTML 마크업과 거리가 멀이질 수 밖에 없죠. 즉, 웹 표준에 어긋난는 방법입니다. 또한 마우스를 사용하지 못하기 때문에 onClick 이벤트를 발생시킬 수 없는 시각장애인의 경우 해당 컨텐츠에 접근하기도 어렵습니다. 제 사이트는 Javascript library로 JQuery를 사용하고 있습니다. JQuery는 파이어폭스나 워드프레스와 비슷한 점이 많습니다 . 예전에 몇몇 글에서 밝혔듯이, 무척 작고 효율적이며, 다양한 기능 외에도 플러그인이 많은 라이브러리죠. 특히 JQuery의 $(document).ready는 DOM의 고질적인 문제인 브라우저의 늦은 랜더링을 해결할 수 있답니다. 탭 메뉴에 해당하는 콘텐츠 구성 저는 사이트 방문객이 좀 더 머무르면서 다양한 콘텐츠에 접근할 수 있는 기회를 제공하기 위해서, 탭 메뉴로 구성된 콘텐츠를 제공하고 싶었습니다. ((-------IMAGE-------)) HTML로 콘텐츠 구조화 탭 메뉴를 책의 목차(Table Of Contents) 형식으로 구성했습니다. 현재의 HTML과 XHTML 스펙에서 가장 구조적인 방법이죠. 물론 앞으로 HTML 5가 채택되어 nav 요소를 사용할 수 있기 전까지 입니다.

CSS로 콘텐츠 시각화 CSS를 이용하여 콘텐츠를 시각적으로 표현했습니다. float 속성을 사용하여 탭 메뉴를 가로로 배치한 점 외에는 특별히 고급 기술을 사용하지 않았습니다. IE가 비순차적 목록(ol)의 상단 마진를 다르게 출력하는 버그 때문에, 2줄의 CSS가 추가됐습니다.

body {
margin:0; padding:0;
font: .75em/1.5 "AppleGothic", "Malgun Gothic", dotum, sans-serif;
}
a { color:#369; font-weight:bold;}
#readMore02 {
position:absolute; top:50%; left:50%;
width:350px;
margin:-120px 0 0 -180px;
border:1px solid #ccc;
}
#readMore02 h2,
#readMore02 h3 { display:none; }
#readMore02 ul {
margin:0; padding:5px 0 0 2px;
height:26px;
border-bottom:1px solid #ccc;
background:#eee;
}
#readMore02 ul li {
list-style:none;
float:left;
margin:0 0 0 3px; padding:0;
position:relative; top:1px;
}
#readMore02 ul li a {
display:block;
padding:.25em .75em;
border:1px solid #ccc;
line-height:1.5; text-decoration:none;
background:#aaa; color:#fff;
}
#readMore02 ul li a:hover,
#readMore02 ul li a:focus,
#readMore02 ul li.tabs-selected a {
border-bottom:1px solid #fff;
background:#fff; color:#f60;
}
#readMore02 div {clear:left;padding-top:1em;} /* IE6 마진 버그 */
#readMore02 div.tabs-selected { display:block; }
#readMore02 div.tabs-hide { display:none; }
#readMore02 ol { margin-top:0; } /* IE6 마진 버그 */
#readMore02 ol li { line-height:2; } JQuery로 콘텐츠 동적 구현 JQuery와 tabs 플러그인을 이용하여 탭 메뉴를 동적으로 구현했습니다. 플러그인에서 지원하는 페이드 효과를 이용하니 훨씬 보기 좋은 탭 메뉴가 구현됐습니다.이 글이 저처럼 블로그에 많은 글을 작성했음에도 불구하고, 예전에 작성한 글이 방문객에게 좀처럼 노출되지 않는 문제로 고민하던 분들에게 도움이 됐으면 좋겠습니다.