이전의 질문에서 발견한 몇가지 키워드는 미디어쿼리와 뷰포트입니다.
/* 모바일 화면에 대한 스타일 */
@media screen and (max-width: 768px) {
/* 여기에 모바일 화면에 적용할 스타일 작성 */
}
여기서 최소 너비 min-width가 768px일때는 768px이상인 경우 스타일을 적용한다는 의미입니다.
일반적으로 태블릿 화면과 PC화면을 지원하는 스타일의 경우를 떠올릴 수 있습니다.
최대 넓이 max-width가 768px일때는 768px 이하의 화면인 경우 스타일을 적용한다는 의미입니다.
모바일 화면을 지원하는 스타일을 적용할 수 있습니다.
이때 max-width 가 768px일인 경우 전체 페이지의 요소 너비도 768px일 이여야 모바일에서 한 화면안에 온전히 표현할 수 있습니다.
그러나, 어제의 경험으로 만약 전체 너비가 425px인 페이지여도 이것을 모바일브라우저로 띄웠을 때는
세로 스크롤 뿐만 아니라 가로 스크롤, 핀치 줌이 가능한 상태였습니다. 흰 여백 부분이 핀치 줌, 가로 스크롤로 인해 접근 가능한 상태로 유지되고 있었습니다.
( 모바일로 엑셀, 또는 구글 시트, 한글 파일을 열었을 때의 가로 스크롤, 흰 여백, 핀치 줌 경험과 유사 )
이때 적용할 수 있는 것이 '뷰포트 메타 태그' 입니다.
HTML 문서의 <head> 태그 내에 뷰포트 메타 태그를 추가하면 가로 스크롤을 제한할 수 있다고 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
이렇게 하면 시작 크기와 최대 크기를 동일하게 설정하며, 유저가 임의로 조작하여 크기를 변경할 수 없도록 설정할 수 있습니다.
post-list.html 에서 최상위 요소는 __layout 입니다.
768px 너비 이상의 화면에서 __layout은 적절한 크기를 유지하며 반응하는데,
768px 이하의 모바일 규격에서는 __layout 요소가 모바일 화면 크기에 맞춰 변하고 있지만
실제 안의 요소들은 최소 크기 + 고정 크기를 이유로 모바일 너비에 맞출 수 없어 벗어나고 있습니다.
( 하늘색 컨테이너 안에 겹친 빨간 선이 실제 모바일 화면의 너비 )
의도대로라면, 모바일 화면 너비의 규격이라면 오른쪽 고정 너비를 가진 컨테이너를 화면 밑으로 내리거나 변형하여 왼쪽 컨테이너만 표시할 계획이었으므로
미디어쿼리를 이용하여 최대 768px 이하의 모바일 너비에서는
1. 오른쪽 고정 너비 컨테이너를 보이지 않게 함.
2. 헤더와 왼쪽 컨테이너의 최대 크기는 고정 768px(=현재 모바일 크기의 __layout 너비)을 넘길 수 없음.
라는 조건이 필요하며,
오른쪽 고정 너비 컨테이너가 숨겨짐으로써 보이지 않게 되는 컨텐츠를 어디에, 얼마나 표현할 것인지 생각해야 합니다.
다양한 전제조건들을 설정해 놓고 같은 매커니즘을 공유하여 다른 html 화면들을 파생시켜 나가면, 반응형 웹 디자인은 유지하면서 최대 너비를 초과하지 않는 일관적인 사용자 경험을 지원할 수 있을 것입니다.
'CRUD 실습' 카테고리의 다른 글
| HTML 메인화면 다듬기 [탐구/기록] (0) | 2024.09.30 |
|---|---|
| HTML 메인화면 뼈대 마무리하기 [탐구/기록] (0) | 2024.09.30 |
| 메인화면 HTML 뼈대 구성하기 [탐구/기록] (0) | 2024.09.30 |
| JpaRepository 사용하기 + Thymeleaf [탐구/기록] (0) | 2024.09.30 |
| 게시판 목록을 불러오는 함수 구현하기 [탐구/기록] (0) | 2024.09.30 |