반응형을 코딩하다가 width 100%인데 자꾸 padding만 넣으면 좌우스크롤이 생겼다.
그럴 땐 width: 100%를 한 영역은 margin이나 padding을 설정하지 말고
그 안쪽 div에서 설정을 하면 좌우스크롤이 생기지 않는다.
예를 들면
위와 같은 경우에는 100%인데 좌우 스크롤이 생기지만
이렇게 할 경우에는 생기지 않는다.
왜 이렇게 되는지 명확한 이유는 모르겠다...아시는 분은 알려주시면 감사하겠습니다..!!
Full Stack Developer 📚
너무 오래된 글이라, 답을 찾으셨을거 같긴한데 box-sizing때문입니다..
위 코드 .main에 box-sizing:border-box; 를 포함하시면 스크롤이 사라집니다.
기본적으로 width를 계산할때 주어진 width값에 패딩이나 마진값을 포함시킬것인지, +시킬것인지에 대한 설정을 해준다고 보시면됩니다..