CSS overflow 때문에 가로 스크롤 생길 때 확인할 것

CSS overflow 때문에 가로 스크롤 생길 때 확인할 것에서 먼저 볼 부분

overflow 문제는 요소 하나가 부모 너비를 넘을 때 자주 발생합니다. 페이지 전체가 밀리는지, 특정 박스 안에서만 스크롤해야 하는지 구분해야 합니다.

가로 스크롤은 모바일 사용자 경험을 크게 떨어뜨립니다. 특히 본문을 읽다가 화면이 좌우로 흔들리면 사이트가 덜 완성된 것처럼 보일 수 있습니다.

원인은 긴 코드, 큰 이미지, 고정 너비 카드, margin과 width 조합 등 다양합니다. 가장 먼저 개발자 도구에서 어떤 요소가 화면 너비보다 넓은지 확인해야 합니다.

코드 블록처럼 내용 자체가 긴 요소는 페이지 전체를 밀기보다 해당 박스 안에서만 가로 스크롤이 생기게 하는 편이 좋습니다. pre에 overflow-x: auto를 주는 이유가 여기에 있습니다.

이미지는 max-width: 100%를 기본으로 두면 부모 영역을 넘는 문제를 줄일 수 있습니다. 고정 px 너비를 줄 때도 모바일 조건을 함께 고려해야 합니다.

코드 블록만 가로 스크롤 허용하기

body {
  overflow-x: hidden;
}

pre {
  max-width: 100%;
  overflow-x: auto;
}

img {
  max-width: 100%;
  height: auto;
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

CSS 글은 속성 하나만 외우기보다 부모 요소와 자식 요소의 관계를 같이 확인하는 방식으로 읽는 것이 좋습니다.

스타일이 적용되지 않을 때는 개발자 도구에서 어떤 규칙이 취소선 처리되는지 먼저 보면 원인을 빠르게 좁힐 수 있습니다.

모바일 화면에서는 고정 너비, 긴 코드, margin 조합이 문제를 만들기 쉬우므로 작은 화면 기준까지 함께 확인해야 합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 페이지 전체가 밀리는지 확인하기
• 긴 코드 블록이나 표를 먼저 확인하기
• 이미지에 max-width가 있는지 보기
• 고정 width와 margin 조합 점검하기