Style Gallery 실행 예제

폭·입력·선호 설정에 적응하기

Platform adaptation

상단의 재생 버튼으로 실습을 실행할 수 있습니다.

실습 화면에서 직접 조작해 보세요. 화면을 벗어나거나 재생을 멈추면 실습도 닫히며, 다시 실행하면 처음부터 시작합니다.

이 예제의 코드

실행 화면의 HTML 소스입니다. 연결된 스타일·스크립트·미디어 경로는 원래 실행 위치를 기준으로 합니다.

코드 영역을 열면 원본을 불러옵니다.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

호스트 관습과 공통 제품 계약을 구분하고, 네이티브 검증이 필요한 부분을 표시합니다.

스택 이동과 모달 닫기의 차이를 검토하고, 웹 모달에서 취소·포커스 복귀를 확인합니다.

Back·Up 검토 질문과 폭별 탐색 구성을 비교합니다. 실제 Android Back은 별도 기기 검증 범위입니다.

키보드로 작업하고 좁은 창에서도 명령과 초안이 유지되는지 확인합니다.

호스트 선택, 창 크기, 입력, 접근성 설정을 순서대로 바꿔 작업 맥락을 검토합니다.

제품 공통 계약과 Apple·Android·Windows별 검증 질문을 비교합니다.

사이드 내비게이션이 행으로 바뀌어도 선택과 작성 중인 이름은 유지됩니다.

다크·경계·글자 크기·모션 감소를 바꿔도 현재 상태가 유지됩니다.