CSS 크기(Dimension) - 높이(Height)/너비(Width)
CSS 요소의 크기는 height와 width 속성으로 제어 할 수 있습니다.
height 와 width 설정
height 와 width 속성은 요소의 높이와 폭을 설정하는데 사용됩니다.height와 width는 auto로 설정될 수 있으며 (이것이 기본값이며, 브라우저가 높이와 폭을 계산하는 것을 의미합니다.), 또는 px, cm 등의 길이 값 또는 포함된 블록의 퍼센트(%)로 설정될 수 있습니다.
참고: height 와 width 속성은 padding, border, 또는 margin을 포함하지 않는다; 이들은 요소의 padding, border 와 margin 내부의 영역의 높이/폭을 설정한다.
다음의 예는 100픽셀 높이와 500픽셀 폭의 <div> 요소를 보여준다.
max-width 설정
max-width 속성은 요소의 최대 폭을 설정하는데 사용된다.
max-width 은 px, cm 등과 같은 길이 값이나 포함하는 블록의 퍼센트(%)로 지정될 수 있으며, 또한 none 으로도 설정 될 수 있다 (이것이 기본 값이며, 최대 폭이 없음을 의미한다.) .
<div>의 문제는 요소의 브라우저의 창이 요소의 폭(500px)보다 작을 때 발생한다. 그러면, 브라우저는 페이지에 가로 스크롤바를 추가한다.
이러한 경우, 대신에 max-width 의 사용은 브라우저의 작은 윈도우 취급을 개선한다. 이는 소형 장치에서 사이트가 사용되도록 할 때 중요한다.
Tip:브라우저 창의 크기를 500px 미만으로 조정하면, 두 div 사이의 차이를 볼 수 있다.
참고: max-width 속성의 값이 width 를 무효화 한다.
다음의 예는 100 픽셀의 높이와 500 픽셀의 폭을 갖는 <div> 요소를 보여준다:
CSS width 와 max-width
이전 장에서 언급한 바와 같이, 블록-수준 요소는 항상 사용할 수 있는 전체 폭 (뻗을 수 있는 왼쪽과 오른쪽 끝까지 이르는)을 차지합니다.
블록-수준 요소의 width 를 설정하면, 그 컨테이너의 가장자리까지 뻗지 않도록 한다. 그런 다음에, 그 컨테이너의 수평 중앙에 그 요소를 위치시키기 위해서 margin 을 auto 로 설정할 수 있다. 그 요소는 지정된 폭을 차지하며, 남은 여백은 두 가장자리 사이에 동등하게 분할된다.
참고: 위의 <div> 에서의 분제는 브라우저 창이 요소의 폭보다 작을 때 발생한다. 그러면, 브라우저는 가로 스크롤바를 그 페이지에 추가한다.
이러한 경우, 대신에 max-width 의 사용은 브라우저의 작은 윈도우 취급을 개선한다. 이는 소형 장치에서 사이트가 사용되도록 할 때 중요한다.
Tip:브라우저 창의 크기를 500px 미만으로 조정하면, 두 div 사이의 차이를 볼 수 있다.
다음은 위의 두 div 의 예이다 :
Example
div.ex1
{
width:
500px;
margin:
auto;
border:
3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin:
auto;
border:
3px solid #73AD21;
}
Try it yourself » 
Try it Yourself - Examples
Set
the height of elements
This example demonstrates how to set the height of different
elements.
Set
the height of an image using percent
This example demonstrates how to set the height of an element
using a percent value.
Set
the min-height and max-height of an element
This example demonstrates how to set the maximum height of an
element.
Set
the min-width and max-width of an element using percent
This example demonstrates how to set the maximum width of an
element.
Test Yourself with Exercises!
All CSS Dimension Properties
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |