코드캠프 팀프로젝트 2주차 - 스크롤 제거

기존의 global style 구조

html,
body {
    max-width: 1200px;
    margin: auto;
    width: 100vw;
    height: 100vh;
    font-size: 16px;
    font-family: "Noto Sans KR", sans-serif;
}

몇 번 여기다가 overfleow-x 를 없애보는 것을 했는데

스크롤 2개가 생겨버린다 ㅠ

 html {
    font-size: 16px;
  }

  body {
    margin: auto;
    max-width: 1200px;
    width: 100vw;
    height: 100vh;

    overflow-x: hidden;
  }

이번에는 html을 분리하고, body에서만 써봤는데

깨끗해졌다.

하지만 여전히 alert이후에 흔들린다!
이번엔 세로 스크롤을 없애보자.
스크롤 기능은 있지만, 스크롤바만 없애고 싶다.
레이아웃을 잘잡아서, padding을 잘 줬으면 흔들리지 않는다는 게시글도 봤었는데, 다른 사이트들도 모달이 뜨면 화면이 흔들리긴 하더라....

  -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    ::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera*/
    }

를 추가하자

깨끗하다.
그런데 스크롤 바가 없어도 괜찮은걸까? ㅠ

그리고 이렇게 해도 모달이 뜨면 흔들리는데
아예 sweet alert의 blur를 꺼버릴 생각이다...

반응형 레이아웃은 처음이라 globalstyles도 layout의 index에도 엄청 많은 스타일들이 적용되었다가 없어졌다가 하고 있는데, 이제 불필요한 style들을 정리해야겠따.