슬슬 웹표준 코딩을 준비하느라.
짬짬이 만들어 본 소스입니다.
미리보기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Tabs</title>
<!-- Description : XHTML Tabs style code [ IE6 , IE7 , FF2] -->
<!-- Author : blueb(http://blueb.net/blog) -->
<!-- Date : 2008-05-08 -->
</head>
<body>
<script type='text/javascript'>
function tabs(idx){
for(i = 1; i <= 3 ; i++ ){
document.getElementById('tab'+i).className = "";
document.getElementById('content'+i).className = "content hide";
}
document.getElementById('tab'+idx).className = "active";
document.getElementById('content'+idx).className = "content show";
}
</script>
<!--[if IE 6]>
<style type='text/css'>
/* IE 6 */
div.tabs-area {
position:relative;
z-index:2;
width:100%;
height:48px;
padding:0;margin:0;overflow:hidden;
}
div.tabs-line {
position:relative;
z-index:1;
width:100%;
height:0;
top:-1px;
border-top:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type='text/css'>
/* IE 7 */
div.tabs-area {
position:relative;
z-index:2;
height:48px;width:100%;padding:0;margin:0
}
div.tabs-line {
position:relative;
z-index:1;
width:100%;
height:1px;
top:-2px;
border-bottom:1px solid #D3D9E6;
}
</style>
<![endif]-->
<!--[if !IE]>-->
<style type='text/css'>
div.tabs-area {
position:relative;
z-index:2;
width:100%;
height:45px;
padding:0;margin:0;overflow:hidden;
}
div.tabs-line {
position:relative;
z-index:1;
width:100%;
height:1px;
top:-1px;
border-top:1px solid #D3D9E6;
}
</style>
<!--<![endif]-->
<style type='text/css'>
ul.tabs {
padding:0px;margin:0px;
z-index:2;
}
ul.tabs li {
list-style:none;
display:inline;
height:50px;
}
ul.tabs li a {
padding:5px 20px 3px 20px;
border:1px solid #D3D9E6;
text-decoration:none;
font-size:9pt;
line-height:30px;
color:#4B69AF;
background:#E9ECF2;
}
ul.tabs li a:hover {
background:#E8FFFF;
}
ul.tabs li a.active {
background:#fff;
color:#4B69AF;
border:1px solid #D3D9E6;
border-bottom: 1px solid #ffffff;
padding:10px 20px 3px 20px;
font-weight:bold;
line-height:70px;
}
div.content {
/* 컨텐츠 영역 박스 스타일 지정 하는곳 */
}
div.show { display:block;}
div.hide { display:none; }
</style>
<h3>IE6, IE7, FF2 Tabs</h3>
<div>
<div class='tabs-area'>
<ul class='tabs'>
<li> </li>
<li><a id='tab1' title="Tab1 Desc" href="javascript:tabs('1');" class='active'>Tab 1</a></li>
<li><a id='tab2' title="Tab2 Desc" href="javascript:tabs('2');">Tab 2</a></li>
<li><a id='tab3' title="Tab3 Desc" href="javascript:tabs('3');">Tab 3</a></li>
</ul>
</div>
<div class='tabs-line'></div>
</div>
<div id='content1' class='content show'>
<h1>Content 1</h1>
</div>
<div id='content2' class='content hide'>
<h1>Content 2</h1>
</div>
<div id='content3' class='content hide'>
<h1>Content 3</h1>
</div>
</body>
</html>
![[포토] 가로등 태양](/blog/thumbnail/1/JP_Thumb/sidebar/thumb_1256750511.jpg)
지나가다가 그냥 한자 적고 갑니다.
현재 활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것 같네요.
또한(샘플이라서 그렇겠지만) a 태그에 title로 보다 상세한 메뉴의 설명이 있으면 더할나위 없이 좋겠어요 :-_ 2008/05/08 12:47
지적에 감사드립니다.
지적하신 내용중 의아한 부분이 있어 혹시 보시거든 댓글 부탁드립니다.
"활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것" 라고 말씀하셨는데 현재 bold 처리 되어 있는 상태이구여 string,em 태그는 추가가 어려울거 같습니다. css로만 컨트롤 되는 부분이기에.. 어떤 의미인지 알고 싶습니다.
그리고 a 태그의 title 부분은 바로 수정해서 추가했습니다.
아직 웹표준에 대한 인식이 부족한듯 합니다.
좋은 하루 되십시오~!! 2008/05/08 13:26
style에서의 bold 처리가 아닌, html 에서의 강조 처리를 말하려던 것이었어요.
style에서의 bold로 강조도 좋겠지만, strong 이나 em으로 강조 구문을 추가해 주는것이 시맨틱에도 맞는것 같아요 ^^; 2008/05/08 13:45
음.. 접근성으로 봤을때는 strong 이나 em으로 처리 해주는것이 맞긴한데
only css+xhtml 코드로는 어려울거 같네요..
자바스크립트로 strong or em 엘러먼트를 추가하는 방법을 구현해야 한다는 의미 같은데 접근성을 위해서 꼭 그렇게 해야 하는 것일까요?? 2008/05/08 14:10
꼭 그렇게 해야한다 라는 법(?) 은 없지만 접근성에 도움이 된다면 한번더 고려해볼만 하겠죠?? ㅎㅎ 현국님의 의견은 스타일이 지원안될경우,스크린리더기 사용자등에게 '어떠한메뉴가 현재 활성화 되어있음' 를 표현하고자 strong 으로 표현을 제시하셨던것 같네요 2008/05/14 16:54
스타일이 지원이 안된다면 저 탭은 무의미하기 때문에 컨테츠 영역에 어떤탭과 연결된것인지 대한 정보를 표시해줘야 할거 같네요..
웹접근성까지 생각하려니깐 굉장히 어려워 지는거 같습니다. 2008/05/14 20:31
사이트 정말 좋은데요..
직업 운영하시는건가요?? 2008/05/14 20:39