시티러너 프로젝트중 모바일 반응형 작업에서 오른쪽 흰색 여백이 발생하였었다.

각 뷰를 보여주는 컴포넌트들의 부모에 width 값을 100vw을 줘서 웹상에서는 여백이 나타나지

않는데 모바일 반응형시에는 아주아주 잘나타났다...

생각보다 여백을 잡기위해서 많은 핸들링을 해봤지만 좀 처럼 잡히지 않았고...

body{
width:100%;
overflow-x:hidden;
}

GlobalStyles에 추가 해주었더니 여백이 감쪽같이 사라졌다. 이런 기본적인것도 못 잡고 더 많이 공부해야겠🗿

overflow

overflow-x 속성 사용법

visible (기본값) : 특정 요소가 박스를 넘어 가더라도, 그대로 보여준다.

hidden : 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리한다.

(가로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 세로 스크롤바는 나타남)

scroll : 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않지만, 사용자가 확인 할 수 있도록 스크롤바를 표시한다.

(가로 스크롤바 항상 표시)

auto : 부모요소의 범위를 넘어가는 자식요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고, 사용자가 해당 부분을 확인 할 수 있도록 스크롤바를 표시 한다.