티스토리 뷰
See the Pen [인터랙션 CSS] 햄버거 메뉴 만들기 by mill (@millfeel) on CodePen.
접근성 이슈
<div class="wrap" tabindex="0" role="navigation" aria-label="mobile menu">
</div>
tab 사용시 포커스 되지 않는 이슈를 해결하기 위해서 "tabindex"를 사용해야 하고, role과 aria-label을 선언하여 해당 ‘div’ 영역에 대한 설명을 제공해야한다.
label의 기본 속성은 포커스가 되지 않는다.
<div class="wrap" tabindex="0" role="navigation" aria-label="mobile menu">
<input type="checkbox" id='menuicon'>
<label for="menuicon">
<span></span>
<span></span>
<span></span>
</label>
</div>
input[id='menuicon'] {display: none;}
input[id='menuicon'] + label {
position: relative;
display: block;
width: 60px;
height: 40px;
cursor: pointer; /* 포인터가 label에 설정돼 있다. */
background-color: #ddd;
}
input[id='menuicon'] + label span {
position: absolute;
display: block;
width: 100%;
height: 5px;
border-radius: 30px;
background-color: #000;
transition: .35s;
}
input[id='menuicon'] + label span:nth-child(1) {top: 0;}
input[id='menuicon'] + label span:nth-child(2) {top: 50%; transform: translateY(-50%);}
input[id='menuicon'] + label span:nth-child(3) {bottom: 0%;}
input[id='menuicon']:checked + label span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
input[id='menuicon']:checked + label span:nth-child(2) {opacity: 0;}
input[id='menuicon']:checked + label span:nth-child(3) {bottom: 50%; transform: translateY(50%) rotate(-45deg);}
Q. .wrap(감싸는 박스)가 아닌 label(자식)에 cursor을 사용한 것일까?
.wrap에 포인터가 되지 않았다.
.wrap {
cursor: pointer; /* 포인터 설정을 .wrap에 적용 */
}
input[id='menuicon'] {display: none;}
input[id='menuicon'] + label {
position: relative;
display: block;
width: 60px;
height: 40px;
/* label에 있던 포인터 설정 삭제 */
background-color: #ddd;
}
[원인]
<label>은 기본 속성인 cursor가 default(커서를 올려도 아무 효과가 없음)이기 때문이다.
.wrap는 별도의 크기를 가지지 않고, 자식인 label의 크기만을 가지고 있기 때문에 .wrap에 설정을 해도 적용이 안되는 것처럼 보이는 것이다.
[공부 좌표]
'인터랙션 & 컴포넌트 > CSS' 카테고리의 다른 글
[컴포넌트 CSS] util menu (0) | 2021.03.12 |
---|
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 링크막기 #a링크막기
- javascript class
- 동치 연산자
- scrollTop
- clientHeight
- 불일치 연산자
- 점 표기법
- 동등 연산자
- 부등 연산자
- constructor
- @font-face
- scrollHeight
- 객체의 프로퍼티
- innerHeight
- 프로퍼티
- __proto__
- offsetHeight
- [[Prototype]]
- clinetTop
- outerHeight
- property
- offsetTop
- 일치 연산자
- prototype 프로퍼티
- 대괄포 표기법
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함