[CSS] 18. Dimension ( 높이, 너비, width, height )

이번에는 dimension에 대해서 포스팅을 해보도록 하겠습니다. 여기서 말하는 디멘션이란 3차원 4차원 이런 것을 말하는 것이 아니고 음...단지 너비와 높이를 다루는 것을 말합니다.  

컨텐트가 들어가는 박스의 디멘션과 관련된 속성들에는 다음과 같은 것들이 있습니다.

•  height 박스의 높이를 결정짓는 속성입니다.

•  width 박스의 너비를 지정하는 속성이죠.

•  line-height 글자 라인의 높이를 지정합니다.

•  max-height 박스의 최대 높이를 제한합니다.

•  min-height 박스의 최소 높이를 제한합니다.

•  max-width 박스의 최대 너비를 제한.

•  min-width 박스의 최소 너비를 제한.

The height and width Properties:

The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.

 

다음 예제를 보시죠. 

<p style="width:400px; height:100px;border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400pixels wide and 100 pixels high </p>

 

결과는 아래와 같습니다.

This paragraph is 400pixels wide and 100 pixels high

 

The line-height Property:

The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.

 

다음 예제를 보시죠.

<p style="width:400px; height:100px;border:1px solid red; padding:5px; margin:10px;line-height:30px;"> This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. </p>

 

결과는 아래와 같습니다.

This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.

 

The max-height Property:

The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

 

다음 예제를 보시죠.

<p style="width:400px; max-height:10px;border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px </p> <img alt="logo" src="/images/css.gif" width="95" height="84" />

 

결과는 아래와 같습니다.

This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px

 

The min-height Property:

The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

 

다음 예제를 보시죠.

<p style="width:400px; min-height:200px;border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px </p> <img alt="logo" src="/images/css.gif" width="95" height="84" />

 

결과는 아래와 같습니다.

This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px

 

The max-width Property:

The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

 

다음 예제를 보시죠.

<p style="max-width:100px; height:200px;border:1px solid red; padding:5px; margin:10px;"> This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px </p> <img alt="logo" src="/images/css.gif" width="95" height="84" />

 

결과는 아래와 같습니다.

This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px

 

The min-width Property:

The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.

NOTE: This property does not work in either Netscape 7 or IE 6.

 

다음 예제를 보시죠.

<p style="min-width:400px; height:100px;border:1px solid red; padding:5px; margin:10px;"> This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px </p> <img alt="logo" src="/images/css.gif" width="95" height="84" />

 

결과는 아래와 같습니다. 

This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px

 

 

 

 

꼭 따라해 보시는 것 잊지 마시고, 이것저것 수치도 바꿔서 해보세요. ^-^  

 

 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_dimension.htm