SIDENAV를 해결하기 위한 방법 생각하기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
오늘날의 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 - 아우트로 및 클릭 유도 문구
리소스:
더 많은 GUI 챌린지를 시청하세요 → https://goo.gle/GUIchallenges
Chrome 개발자 구독 → http://goo.gl/LLLNvf
arrow_back 모든 에피소드로 돌아가기
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2021-01-21(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2021-01-21(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2021-01-21(UTC)"],[],[]]