CSS Layout-width and max-width

Using width, max-width and margin:auto;

width를 설정하는 것은 컨테이너의 모서리보다 넘치는 것을 예방한다. margin을 auto로 하고, 수평적으로 중앙을 맞출 수 있다. 그 요소는 지정된 width를 가지고 남은 공간은 동등하게 분할될 것이다.

하지만 이것의 문제는 브라우저 창이 요소의 width보다 작을 경우이다. 브라우저는 페이지에 수평 스크롤바를 추가한다.

max-width를 대신 쓰면 작은 창의 브라우저를 잘 다룰 수 있다. 작은 기기에서 사이트를 사용할 수 있게 하려면 중요하다.

ex2는 너비가 500px 이하가 되어도 짤리지 않고 반응형으로 border가 모두 표시된다.

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}