자~~ 한번 시작해볼까요??
자~~ 한번 시작해볼까요??
a:active, a:focus{
outline:none;
}
a {
white-space:nowrap;
}
html{
overflow:-moz-scrollbars-vertical;
}
h2 {
page-break-before:always;
}


<!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>
지나가다가 그냥 한자 적고 갑니다.
현재 활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것 같네요.
또한(샘플이라서 그렇겠지만) a 태그에 title로 보다 상세한 메뉴의 설명이 있으면 더할나위 없이 좋겠어요 :-_
지적에 감사드립니다.
지적하신 내용중 의아한 부분이 있어 혹시 보시거든 댓글 부탁드립니다.
"활성화 되어 있는 탭은 a 태그로 클릭영역을 주는것 보다는 strong 이나 em 으로 현재의 활성화 되어있는 위치를 표현해 주는게 접근성에 좋을것" 라고 말씀하셨는데 현재 bold 처리 되어 있는 상태이구여 string,em 태그는 추가가 어려울거 같습니다. css로만 컨트롤 되는 부분이기에.. 어떤 의미인지 알고 싶습니다.
그리고 a 태그의 title 부분은 바로 수정해서 추가했습니다.
아직 웹표준에 대한 인식이 부족한듯 합니다.
좋은 하루 되십시오~!!
style에서의 bold 처리가 아닌, html 에서의 강조 처리를 말하려던 것이었어요.
style에서의 bold로 강조도 좋겠지만, strong 이나 em으로 강조 구문을 추가해 주는것이 시맨틱에도 맞는것 같아요 ^^;
음.. 접근성으로 봤을때는 strong 이나 em으로 처리 해주는것이 맞긴한데
only css+xhtml 코드로는 어려울거 같네요..
자바스크립트로 strong or em 엘러먼트를 추가하는 방법을 구현해야 한다는 의미 같은데 접근성을 위해서 꼭 그렇게 해야 하는 것일까요??
꼭 그렇게 해야한다 라는 법(?) 은 없지만 접근성에 도움이 된다면 한번더 고려해볼만 하겠죠?? ㅎㅎ 현국님의 의견은 스타일이 지원안될경우,스크린리더기 사용자등에게 '어떠한메뉴가 현재 활성화 되어있음' 를 표현하고자 strong 으로 표현을 제시하셨던것 같네요
스타일이 지원이 안된다면 저 탭은 무의미하기 때문에 컨테츠 영역에 어떤탭과 연결된것인지 대한 정보를 표시해줘야 할거 같네요..
웹접근성까지 생각하려니깐 굉장히 어려워 지는거 같습니다.
<style type="text/css">
#p1, #p2 { color: blue; }
#p2 {color:red;}
</style>
안녕. 나는 블루비야.
CSS 너무 어려워.
쉽게 배울 수 없을까?
안녕. 나는 블루비야.
CSS 너무 어려워.
쉽게 배울 수 없을까?
<style type="text/css">
#p4, #p5 { color: blue !important; }
#p5 {color:red;}
</style>
안녕. 나는 블루비야.
CSS 너무 어려워.
쉽게 배울 수 없을까?
안녕. 나는 블루비야.
CSS 너무 어려워.
쉽게 배울 수 없을까?
아... !important;의 의미를 찾던중... 이런거였구나~~
하고 알게됐네요 ^^;
조촐하지만... 덧글이라도 감사의 말씀을 남김니다.
/* IE Only */
#element-id {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[image url]', sizingMethod='scale'),alpha(opacity=85);
}
/* Other brower */
html>body #element-id {
background:url([image url]) transparent; opacity:0.85;
}
[/css]
세상에..ㅠㅁㅠ 님 정말 감사해요
완전 몇시간동안 해매고 있었는데,,
구글에서 살짝 검색하니,
바로 첨에 님 글 봤습니다..
완전 금방 해결하고 감사합니다.
복받으실꺼에요~~!!!ㅎ
첫번째 방법
/* 여기까지는 모든 브라우저에서 실행됨 */
voice-family: "\"}"";
voice-family: inherit;
/* 여기서부터는 IE6에서는 실행안됨 */
두번째 방법
#header {margin-bottom:3em} /* ie는 여기 스타일 적용*/
html>body #header {margin-bottom:1em} /* 다른 브라우저는 여기 스타일 적용 */
|
원문 : 행복한고니@블로그
관련내용출처 : http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php
IE6 이하에 대해서는
* html { … } 와 같이 사용합니다.
IE7 이하에 대해서는
*:first-child+html { … } * html { … } 와 같이 HTML 을 선택합니다.
(두개 같이 쓰라는 말 같습니다)
IE7 에만 적용되게 하려면
*:first-child+html { … } 와 같이 HTML 을 선택합니다.
IE7 과 기타 최신의 브라우저를 위해서는 (IE6 제외)
html>body { … } 와 같이 body 를 선택합니다.
IE7 을 제외한 최신의 브라우저에는
html>/**/>body { … } 와 같이 body를 선택합니다.
Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.
| Points | Pixels | Ems | Percent |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
출처 : http://blog.naver.com/cf54e/110007901264
DIV레이어를 보임/숨김 속성을 지정하는데 있어 display 와 visiblity 두 가지 모두를 사용한다.
그런데 속성의 차이, 즉 display 와 visiblity 의 차이는 극명하게 달라진다.
[CODE] <div style="display:;"> [/CODE] 의 경우에는 div 레이어 위치값을 지정하지 않더라도, div레이어가 있는 위치에서 지정되어진 크키만큼 보임/숨김을 나타내지만,
display 스타일 속성은 개체가 표현되는가를 나타내는 문자열이다.
| block | 개체가 블럭엘레멘트로 표현된다. |
| none | 개체가 디스플레이되지 않는다. |
| inline | 디폴트이며, 개체가 내용의 크기에따라 인라인 엘레멘트로 표현된다. |
| inline-block | 개체가 인라인으로 표현되지만, 개체의 내용은 블럭 엘레멘트로 표현된다. 인접 인라인 엘레멘트는 간격을 허용하며 같은 라인에 표현된다. |
| list-item | IE6 이후, 개체가 블럭엘레멘트로 표현되고 목록항목 마크가 추가된다. |
| table-header-group | 테이블의 머릿부분(header)이 항상 모든 줄과 줄의 구룹보다 먼저, 그리고 윗 제목(caption) 아래 디스플레이된다. 이 머릿부분은 테이블이 확장된 각 페이지에 디스플레이된다. |
| table-footer-group | 테이블의 바닥부분(footer)이 항상 모든 줄과 줄의 구룹 다음, 그리고 바닥 제목(caption) 위에 디스플레이된다. 이 바닥부분은 테이블이 확장된 각 페이지에 디스플레이된다. |
[CODE] <div style="visiblity:;"> [/CODE] 의 경우엔 display값과는 다르게 div레이어가 나타내져야 하는 위치값을 반드시 지정해야만 한다는 것이다.
| inherit | IE NS | 디폴트이며, 다음 모체 개체의 속성로부터 상속받는디. |
| hidden | IE | 개체가 감춰진다. |
| hide | NS | 감춘다. |
| show | NS | 보인다. |
| visible | IE | 개체가 보인다. |
display 속성의 경우엔 div 레이어 자체가 주어진 공간에 나타내어지지만, visiblity 속성의 경우엔 지정한 위치값에 오버랩되어 나타나기 때문이다.
<style>
#box {
background-color:#FF3300;
left:10px;
top:10px;
position: absolute;
width: 250px;
height:100px;
border: 1px Solid WindowFrame;
background: Infobackground;
color: InfoText;
font: StatusBar;
font: Status-Bar;
padding: 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=3);
z-index: 10000;
}
</style>
<div id=box> </div>