스킵 네비 및 딤처리 가이드
접근성 스킵 네비게이션 스타일가이드
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
'StyleSheet > CSS' 카테고리의 다른 글
| rgba(Transparent) & opacity (0) | 2016.09.29 |
|---|---|
| View Port (뷰포트 설정) (0) | 2016.09.29 |
| 조건 주석문 처리방식 (0) | 2016.09.29 |
| CSS Dimension & 박스 모델, display vs visibility (0) | 2016.09.17 |
| Cascading Style Sheet (0) | 2016.09.16 |
