Bramus는 제이크에게 브라우저에 있는 모든 표시 영역에 대해 알립니다. 고정 위치, vw 단위 또는 height:100%와 관련하여 레이아웃 문제가 있다면 아마도 이 에피소드에서 그 이유를 설명할 수 있을 것입니다.
챕터:
- 00:00 - 프롤로그
- 00:17 - 소개
- 01:03 - 데스크톱 브라우저 / 레이아웃 표시 영역
- 05:33 - ICB
- 12:51 - 표시 영역 유닛
- 16:07 - 손가락 모으기 확대/축소/시각적 표시 영역
- 19:29 - 모바일 브라우저의 레이아웃 표시 영역, ICB, 시각적 표시 영역
- 23:30 - 대형, 소형, 동적 표시 영역
- 28:35 - 표시 영역 단위와 ICB와의 관계
- 30:25 - 수정 가능한 영역에 포커스가 있을 때의 크기 조절 동작 (모바일)
- 36:01 - 가상 키보드 API
- 38:44 - 수정 구슬 살펴보기
- 42:04 - Interop 2022 표시 영역 조사 노력
- 43:20 - 에필로그
리소스:
- 대형, 소형, 동적 표시 영역 → https://goo.gle/3qxhne7
- VirtualKeyboard API를 사용하여 콘텐츠가 가상 키보드 아래에 숨겨지지 않도록 방지 → https://goo.gle/3U9rl2X
- Interop 2022 뷰포트 조사 노력에 대한 논의 → https://goo.gle/3DhBHYN
- Interop 2022 뷰포트 조사 노력 테스트 페이지 → https://goo.gle/3BDcuqy
- 표시 영역 크기 조절 동작 및 배치에 관한 CSSWG 문제 → https://goo.gle/3QJe12q
사양:
- (레이아웃) 표시 영역 정의 (CSS2 사양) → https://goo.gle/3DlfjxG
- 차단 정의 포함 (CSS2 사양) → https://goo.gle/3Dl9hwN
- 표시 영역 상대 길이 (CSS 값 4 사양) → https://goo.gle/3ddLwvZ
- The Visual Viewport (MDN) → https://goo.gle/3L9PsKU
- Visual Viewport API (CSSOM 사양) → https://goo.gle/3qvAJk2
- 표시 영역 변형 (CSS 값 4 사양) → https://goo.gle/3U7Wd3M
- 가상 키보드 사양 → https://goo.gle/3qzq7R2
HTTP 203 시리즈 동영상 더보기 → http://goo.gle/HTTP203 여기에서 Chrome 개발자 구독하기 → https://goo.gle/ChromeDevs
또한 HTTP203 팟캐스트도 마음에 드셨다면 다음 팟캐스트도 확인해 보세요. → https://goo.gle/HTTP203Podcast