CSS-차원

모든 상자를 둘러싸는 테두리를 보았습니다. 요소, 각 상자 내부에 나타날 수있는 패딩과 상자 주위를 이동할 수있는 여백입니다. 이 튜토리얼에서는 상자의 치수를 변경하는 방법을 배웁니다.

상자의 크기를 제어 할 수있는 다음 속성이 있습니다.

그만큼 height 속성은 상자의 높이를 설정하는 데 사용됩니다.
그만큼 width 속성은 상자의 너비를 설정하는 데 사용됩니다.
그만큼 line-height 속성은 텍스트 줄의 높이를 설정하는 데 사용됩니다.
그만큼 max-height 속성은 상자가 될 수있는 최대 높이를 설정하는 데 사용됩니다.
그만큼 min-height 속성은 상자가 될 수있는 최소 높이를 설정하는 데 사용됩니다.
그만큼 max-width 속성은 상자가 될 수있는 최대 너비를 설정하는 데 사용됩니다.
그만큼 min-width 속성은 상자가 될 수있는 최소 너비를 설정하는 데 사용됩니다.

높이 및 너비 속성

높이 및 폭 속성은 상자의 높이와 너비를 설정할 수 있습니다. 길이, 백분율 또는 키워드 auto의 값을 사용할 수 있습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

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

다음 결과가 생성됩니다-

line-height 속성

라인 높이 속성을 사용하면 텍스트 줄 사이의 공간을 늘릴 수 있습니다. line-height 속성의 값은 숫자, 길이 또는 백분율 일 수 있습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <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>
   </body>
</html>

다음 결과가 생성됩니다-

최대 높이 속성

최대 높이 속성을 사용하면 상자의 최대 높이를 지정할 수 있습니다. max-height 속성의 값은 숫자, 길이 또는 백분율 일 수 있습니다.

NOTE −이 속성은 Netscape 7 또는 IE 6에서 작동하지 않습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>  
   <body>
      <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>
      <br>
      <br>
      <br>
      <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" />
   </body>
</html>

다음 결과가 생성됩니다-

최소 높이 속성

분 높이 속성은 박스의 최소 높이를 지정할 수 있습니다. min-height 속성의 값은 숫자, 길이 또는 백분율 일 수 있습니다.

NOTE −이 속성은 Netscape 7 또는 IE 6에서 작동하지 않습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <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 = "/css/images/logo.png" width = "95" height = "84" />
   </body>
</html>

다음 결과가 생성됩니다-

최대 너비 속성

최대 너비 속성을 사용하면 상자의 최대 폭을 지정할 수 있습니다. max-width 속성의 값은 숫자, 길이 또는 백분율이 될 수 있습니다.

NOTE −이 속성은 Netscape 7 또는 IE 6에서 작동하지 않습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <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" />
   </body>
</html>

이것은 다음 결과를 생성합니다-

최소 너비 속성

분 너비 속성을 사용하면 상자의 최소 폭을 지정할 수 있습니다. min-width 속성의 값은 숫자, 길이 또는 백분율이 될 수 있습니다.

NOTE −이 속성은 Netscape 7 또는 IE 6에서 작동하지 않습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <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
      </p>
      <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" />
   </body>
</html>

다음 결과가 생성됩니다-