[CSS] 가로 스크롤 이슈 해결하기

이전에도 최상단의 태그에(body) width값을 100vw로 주고 하위 태그들에는 100%값을 주는데 자꾸 가로 스크롤이 생겨서 해결했던 적이 있다. 오랜만에 다시 만들어보니 똑같은 이슈를 겪었고 이에 대한 해결 방법에 대해서 간단히 기록해놓고자 한다. 

가로 세로 스크롤이 생기는 이유는 해당 요소의 크기가 부모 요소나 뷰포트(viewport)를 벗어나기 때문이다. 

 

1. 전역 CSS 설정 시, 요소들의 box-sizing이 border-box인지 확인한다. 

2. overflow: hidden을 설정한다. (가장 간단한 방법이지만 컨텐츠가 잘릴 수 있다.) => 가로 스크롤이니까 특정적으로는 overflow-x: hidden

3. 최상위 태그에 width 가 아니라 max-width나 max-height 값을 설정하여 최대 크기를 제한한다. ✅

4. 하위 요소의 width 값은 100%으로 상대값을 주어 부모 컨테이너의 사이즈를 따르게 한다. 

 

body 태그에 width값이 100vw로 지정되어있어 브라우저의 전체 너비를 차지하는 사이즈로 설정해놨다. 

이 경우에, body 태그 내부에 콘텐츠가 width값이 더 큰 요소가 있다면 해당 요소의 너비가 body태그의 너비보다 크기 때문에 가로 스크롤이 생길 수 있다. 나의 경우는 이와 동일했고 width값을 max-width로 주어 해결할 수 있었다.