수다닷컴

CSS

/* 공통css */
* {margin:0; padding:0;}
li {list-style:none;}
img {vertical-align:top; border:none;}
body {font:12px dotum, 돋움, sans-serif; color:#222;}
a {text-decoration:none; color:#222;}
.hid {position:absolute; left:-9999px; font-size:0; width:0; height:0; overflow:hidden; text-indent:-9999px;}

/* 탭메뉴1번 css */
#tab_menu {width:385px; height:170px; position:relative; background:url(img/ta_bg.gif) repeat-x left top;}
#tab_menu dt {float:left;}
#tab_menu dd {position:absolute; top:30px; left:0; display:none;}
#tab_menu li {line-height:27px; height:27px; width:385px; position:relative;}
#tab_menu span {position:absolute; right:5px;}
#tab_menu p {position:absolute; top:-20px; right:0;}
#tab_menu dd.tab {display:block;}

/* 탭메뉴2번 css */
#tab_menu2 {width:385px; height:170px; position:relative; background:url(img/ta_bg.gif) repeat-x left top;}
#tab_menu2 span {float:right;}
ul.sub {position:absolute;}
.sub li {width:385px; padding-top:10px;}
li.header_menu {float:left;}
.more {position:absolute; top:10px; right:0px;}
/style

마크업

!-- 탭메뉴1번 --
h3 class=hid공지사항, 입찰정보, 채용공고 최근 게시물/h3
dl id=tab_menu
dta href=#img src=img/ta_1_over.gif alt=공지사항 //a/dt
dd class=tab
ul
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
/ul
pa href=#img src=img/tab_more.gif alt=더보기 //a/p
/dd
dta href=#img src=img/ta_2_out.gif alt=입찰정보 //a/dt
dd
ul
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
/ul
pa href=#img src=img/tab_more.gif alt=더보기 //a/p
/dd
dta href=#img src=img/ta_3_out.gif alt=채용공고 //a/dt
dd
ul
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
/ul
pa href=#img src=img/tab_more.gif alt=더보기 //a/p
/dd
/dl!-- 탭메뉴2번 --
ul id=tab_menu2
li class=header_menua href=#img src=img/ta_1_over.gif alt=공지사항 //a
ul class=sub
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지뾰다공지사항 내용입니다/aspan2012-12-16/span/li
/ul
p class=morea href=#img src=img/tab_more.gif alt=더보기 //a/p
/li
li class=header_menua href=#img src=img/ta_2_out.gif alt=입찰정보 //a
ul class=hid
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
/ul
p class=hida href=#img src=img/tab_more.gif alt=더보기 //a/p
/li
li class=header_menua href=#img src=img/ta_3_out.gif alt=채용공고 //a
ul class=hid
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/aspan2012-12-16/span/li
lia href=#공지사항 내용입니다공지사항 내용입니다/a span2012-12-16/span/li
/ul
p class=hida href=#img src=img/tab_more.gif alt=더보기 //a/p
/li학원에서 배운 내용인데..
선생님이 탭메뉴나 유틸메뉴,스킵메뉴 등등 왠만한건 거의 다 dl요소로 마크업을 하라고 배우고 있습니다
1번은 선생님이 하신거구요 2번은 제가 한건데..
탭메뉴 만들때 2번으로 해도 상관이 없는건지 아님 1번으로 무조건 해야하는건지 궁금해서 질문올립니다

신청하기