본문으로 바로가기

Skip Navigation 및 Dimmed style guide

category StyleSheet/CSS 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


'StyleSheet > CSS' 카테고리의 다른 글

rgba(Transparent) & opacity  (0) 2016.09.29
View Port (뷰포트 설정)  (0) 2016.09.29
Skip Navigation 및 Dimmed style guide  (1) 2016.09.29
조건 주석문 처리방식  (0) 2016.09.29
CSS Dimension & 박스 모델, display vs visibility  (0) 2016.09.17
Cascading Style Sheet  (0) 2016.09.16

댓글을 달아 주세요

  1. kohbong 2018.01.09 09:20

    좋은 내용 감사합니다.^^;