CSS max-width

width, max-width, margin: auto; 사용

이전 장에서 언급한 바와 같이, 블록 레벨 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어납니다).

블록 레벨 요소의 width를 설정하면 해당 요소의 용기 가장자리로 확장되지 않습니다. 그런 다음 여백을 자동으로 설정하여 요소의 용기 내 수평 중심을 맞출 수 있습니다. 요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

max-width를 사용하면 브라우저의 작은 창 처리 능력이 향상됩니다. 이는 소규모 장치에서 사이트를 사용할 수 있도록 할 때 중요합니다.

예제 1

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

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