StyleSheet/CSS
Skip Navigation 및 Dimmed style guide
jaiyah
2016. 9. 29. 08:06
스킵 네비 및 딤처리 가이드
접근성 스킵 네비게이션 스타일가이드
css
.skipNav {
width:980px;overflow:hidden;margin:0 auto;position:relative
}
.skipNav a {
display:block;background:#000;font-weight:bold;width:0;height:0;
margin:0 -1px -2px 0;overflow:hidden;font-size:11px;text-align:center
}
.skipNav a:hover, .skipNav a:focus, .skipNav a:active {
height:20px;line-height:1;margin:0;padding-top:5px;width:auto;
text-decoration:none;color:#FFF
}레이어 팝업에 사용되는 딤처리 스타일 가이드
html
<body>
<div class="content">콘텐츠</div>
<button>팝업보기</button>
<!-- body 끝나기 전!!! -->
<div class="lightbox-dim"></div>
</body>css
.lightbox-dim {
position: fixed;
top: 0; left: 0;
background: #000;
width: 100%;
height: 100%;
z-index: 2100;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=66);
opacity: 0.66;
}
Jaehee's WebClub