이번에 사이트를 개편하면서, 탭 메뉴로 구성된 추천 글 목록을 추가했습니다. 제 사이트의 방문자 통계를 확인하니, 방문자들의 이동 경로가 1개의 글만 읽고 사이트를 떠나거나, 홈페이지로 이동하는 등 무척 기초적인 수준의 이용만 하고 있다는 것을 확인했기 때문입니다. 블로그의 글이 360개임에도 불구하고 1~2개 글만 보고 떠나는 걸 방치할 수 없었기에 추가한 콘텐츠입니다.

웹 사이트에서 탭 메뉴를 구현하기 위한 일반적인 방법은 Javascript의 onClick 이벤트를 이용하여, style의 display 속성을 조정하는 것입니다. 이때 보통은 HTML a 태그에 Javascript를 직접 사용하는 방식을 이용합니다. 때문에 이 방법은 구조적인 HTML 마크업과 거리가 멀이질 수 밖에 없죠. 즉, 웹 표준에 어긋난는 방법입니다. 또한 마우스를 사용하지 못하기 때문에 onClick 이벤트를 발생시킬 수 없는 시각장애인의 경우 해당 컨텐츠에 접근하기도 어렵습니다.

제 사이트는 Javascript library로 JQuery를 사용하고 있습니다. JQuery는 파이어폭스나 워드프레스와 비슷한 점이 많습니다 . 예전에 몇몇 글에서 밝혔듯이, 무척 작고 효율적이며, 다양한 기능 외에도 플러그인이 많은 라이브러리죠. 특히 JQuery의 $(document).ready는 DOM의 고질적인 문제인 브라우저의 늦은 랜더링을 해결할 수 있답니다.

탭 메뉴에 해당하는 콘텐츠 구성

저는 사이트 방문객이 좀 더 머무르면서 다양한 콘텐츠에 접근할 수 있는 기회를 제공하기 위해서, 탭 메뉴로 구성된 콘텐츠를 제공하고 싶었습니다.

겸손한 탭 메뉴 구현

HTML로 콘텐츠 구조화

탭 메뉴를 책의 목차(Table Of Contents) 형식으로 구성했습니다. 현재의 HTML과 XHTML 스펙에서 가장 구조적인 방법이죠. 물론 앞으로 HTML 5가 채택되어 nav 요소를 사용할 수 있기 전까지 입니다.

<div id="readMore02">
	<h2>또 다른 읽을거리</h2>
	<ul class="tabs-nav">
		<li class="tabs-selected"><a href="#relatedPost">Related Post</a></li>
		<li><a href="#randomPost">Random Post</a></li>
		<li><a href="#recentPost">Lasted Post</a></li>
	</ul>
	<div id="relatedPost" class="tabs-selected ">
		<h3>Related Post</h3>
		<ol>
			<li><a href="#">웹표준의 득과 실</a></li>
			<li><a href="#">브라우저 업그레이드 캠페인</a></li>
			<li><a href="#">Hooney.net 리뉴얼 계획-1</a></li>
			<li><a href="#">올블로그의 플래시 네비게이션</a></li>
			<li><a href="#">아직 메인시안도 미완성이네..</a></li>
		</ol>
	</div>
	<div id="randomPost">
		<h3>Random Post</h3>
		<ol>
			<li><a href="#">세계 비보이 대회 한국 개최, 그리고 잡담</a></li>
			<li><a href="#">KWAG 7회 워크샵</a></li>
			<li><a href="#">CSS, 웹표준 실무 적용 워크샵 2006</a></li>
			<li><a href="#">Global Web Expert 실무 워크샵</a></li>
			<li><a href="#">변경된 구글 코리아의 첫 화면을 뜯어 보자.</a></li>
		</ol>
	</div>
	<div id="recentPost">
		<h3>Recent Post</h3>
		<ol>
			<li><a href="#">블로그 4번째 리뉴얼</a></li>
			<li><a href="#">Fujitsu ColorSelector 사용기</a></li>
			<li><a href="#">W3C의 마크업 유효성 검사 서비스 디자인 개편</a></li>
			<li><a href="#">Fujitsu 웹 접근성 보조도구</a></li>
			<li><a href="#">구글 페이지 랭크 7점 획득</a></li>
		</ol>
	</div>
</div>

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 플러그인을 이용하여 탭 메뉴를 동적으로 구현했습니다. 플러그인에서 지원하는 페이드 효과를 이용하니 훨씬 보기 좋은 탭 메뉴가 구현됐습니다.

이 글이 저처럼 블로그에 많은 글을 작성했음에도 불구하고, 예전에 작성한 글이 방문객에게 좀처럼 노출되지 않는 문제로 고민하던 분들에게 도움이 됐으면 좋겠니다. 🙂