Web Guide가로 스크롤레이아웃 오류모바일 점검
가로 스크롤 원인 찾기
옆으로 밀리는 화면은 가장 흔하고 눈에 띄는 오류입니다.
원인은 대부분 몇 가지로 정해져 있습니다.
01흔한 원인
화면보다 넓은 요소가 있습니다.
01
고정 폭 요소
픽셀로 지정된 너비.
02
큰 이미지
줄어들지 않게 설정됨.
03
표
열이 많아 넘칩니다.
04
긴 문자열
주소나 영단어가 안 잘립니다.
05
여백 계산
너비와 여백이 합쳐져 넘칩니다.
06
음수 여백
바깥으로 밀려납니다.
02찾는 방법
범인을 특정하는 요령이 있습니다.
개발자 도구
요소를 훑으며 폭을 확인.
테두리 표시
모든 요소에 선을 그려 봅니다.
축소 확인
화면을 줄여 어디가 남는지.
영역 접기
하나씩 숨겨 범위를 좁힙니다.
스크립트 점검
화면 폭 초과 요소를 찾습니다.
여러 크기
특정 폭에서만 생기기도.
03해결 방법
원인별로 대응합니다.
최대 폭 제한화면을 넘지 않게 합니다.
이미지 축소화면에 맞게 줄어들게.
표 감싸기표만 따로 스크롤.
긴 글자 줄바꿈단어 중간에서도 잘리게.
여백 계산 방식너비에 여백을 포함.
넘침 처리임시 조치로만 사용.
04예방 방법
처음부터 안 생기게 합니다.
임시 대응
전체 넘침을 숨김 처리 · 원인은 그대로 · 다른 문제 유발
근본 대응
고정 폭 사용 최소화 · 이미지 기본 규칙 설정 · 검수 항목에 포함 · 여러 폭에서 확인
CHECK POINT
□ 모든 페이지에서 가로 스크롤이 없는가
□ 이미지가 화면을 넘지 않는가
□ 표가 페이지 전체를 밀지 않는가
□ 긴 주소나 영단어가 넘치지 않는가
□ 고정 폭 요소를 최소화했는가
□ 여러 화면 폭에서 확인했는가
□ 숨김 처리로 덮지 않고 원인을 고쳤는가
□ 검수 항목에 포함했는가
#가로 스크롤#레이아웃 오류#모바일 점검#이미지#표#검수#디버깅#반응형#웹비스타#홈페이지 제작