CSS 레이아웃 - 너비 및 최대 너비
너비, 최대 너비 및 여백 사용: auto;
이전 장에서 언급했듯이; 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남).
블록 수준 요소를 설정하면 width컨테이너의 가장자리까지 늘어나는 것을 방지할 수 있습니다. 그런 다음 여백을 자동으로 설정하여 컨테이너 내에서 요소를 수평으로 가운데에 둘 수 있습니다. 요소는 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에 균등하게 분할됩니다.
이 <div> 요소는 너비가 500픽셀이고 여백이 자동으로 설정되어 있습니다.
참고: 위의 문제 <div>는 브라우저 창이 요소의 너비보다 작을 때 발생합니다. 그런 다음 브라우저는 페이지에 수평 스크롤바를 추가합니다.
이 상황에서 대신 사용하면 max-width작은 창에 대한 브라우저의 처리가 향상됩니다. 이것은 작은 장치에서 사용할 수 있는 사이트를 만들 때 중요합니다.
이 <div> 요소는 최대 너비가 500픽셀이고 여백이 자동으로 설정되어 있습니다.
팁: 브라우저 창의 크기를 500px 미만으로 조정하여 두 div의 차이를 확인하세요!
다음은 위의 두 div의 예입니다.
예시
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}