CSS 레이아웃 - width와 max-width

width, max-width 및 margin: auto를 사용하여;

이전 장에서 설명한 것처럼, 블록 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장됩니다).

블록 요소의 width 그래서 그것이 컨테이너의 가장자리까지 확장되지 않도록 합니다. 그런 다음, 요소를 컨테이너 내에서 수평으로 중앙에 배치하려면 마argins을 auto로 설정할 수 있습니다. 요소는 지정된 너비를 차지하며, 남은 공간은 두 마argins 사이에 평균적으로 분배됩니다:

이 <div> 요소의 너비는 500px이며, 마argins은 auto로 설정되었습니다.

주의:브라우저 창이 요소의 너비보다 작을 때, 위의 이 <div> 브라우저는 페이지에 수평 스크롤 바를 추가할 것입니다.

이 경우, 다음과 같은 문제가 발생할 수 있습니다. max-width 브라우저가 작은 창에서의 처리를 개선할 수 있습니다. 작은 장치에서 웹사이트가 사용 가능하도록 만드는 것이 중요합니다:

이 <div> 요소의 최대 너비는 500px이며, 마argins은 auto로 설정되었습니다.

ヒント:브라우저 창의 크기를 500픽셀보다 작게 조정하여 두 div 간의 차이를 확인하세요!

위 두 개의 div의 예제입니다:

예제

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

직접 시도해보세요