오늘날의 GUI 도전과제에서는 CSS와 JS를 사용하여 반응형, 액세스 가능한 슬라이드 아웃 탐색 사용자 환경을 만듭니다. 사이드 탐색은 다양한 브라우저, 화면 크기, 입력 기기에서 작동합니다. 기이하지 않죠? 그리드, 변환, 의사 클래스, 여러 JavaScript를 사용하여 이 UX를 처리합니다.
@AdamArgyleInk는 에피소드가 공개된 후 처음 30분 동안 댓글에 응답해 드립니다. 여기에서 문의하거나 질문하거나 자신의 코드를 제출하세요.
챕터:
- 0:00 - 소개
- 0:30 - 코너 기능 디버깅 개요
- 2:25 - 그리드 += 미디어 쿼리 스택 레이아웃
- 3:42 - 접근성 높은 변환 전환
- 4:22 - :target 유사 클래스
- 5:57 - 이스케이프 키 UX
- 6:16 - 포커스 조정
- 6:49 - 스크린 리더 UX
- 7:56 - 아우트로 및 클릭 유도 문구
리소스:
- 함께 코딩하기 → https://goo.gle/3sQ8Xif
- 내용을 확인해 보세요. → https://goo.gle/2Np83J9
- 데모 사용해 보기 → http://goo.gle/3bVBFYT
- 다른 개발자들이 Sidenav (GUI 제출)를 빌드하는 방법을 알아보세요. → https://goo.gle/36CAeuO
더 많은 GUI 챌린지를 시청하세요 → https://goo.gle/GUIchallenges
Chrome 개발자 구독 → http://goo.gl/LLLNvf