max-width, rem

<div class="test">TEST</div>

html에 이렇게 만들고

.test {
  background-color: red;
  padding: 100px;
  /* width: 1000px; */
  max-width: 1000px;
}

css에 이렇게 해줬는데
width와 max-width의 차이점 : if the container width is larger than the specified max-width,then the width of the element is equal to the value that was speicifed for max-width. However, if the container width is less than the specified max width,then the width of the element will be 100% of the container element width.

화면창을 줄여줬을 때 max-width로 하면 width가 줄어듬!!

rem - root element's font-size
디폴트로 1rem = 16px이다.
근데 css에 이런식으로

html {
  font-size: 10px;
}

하면 1rem = 10px로 변하게 된다.
근데 이렇게 하면 문제점이 웹페이지를 보는 유저가
만약 폰트를 줄이거나 늘리거나 하면 보이는거에 문제가 생길 수 있다.
그래서 %로 설정을 해줘야 한다.

html {
  font-size: 62.5%;
}

62.5%;가 나온 경위는
10px / 16px = 0.625 = 62.5%
요렇게 나오게 된것이다.
이렇게 해놓으면 만약 유저가 폰트 크기를 변경하게 되어도
저 퍼센트에 따라서 설정이 되기 때문에 보이는거에 문제가 안생긴당...