오늘날의 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