====== CSS Height / Width ======
<WRAP left notice 80%>
  * description : CSS Height / Width
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-05
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_dimension.asp|CSS Height / Width]]
\\
\\
======CSS Height and Width======
CSS ''height''와 ''width''속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다\\
\\
CSS ''max-width''속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.\\
\\
======CSS Setting height and width======
''height''와 ''width'' 속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다.\\
\\
높이와 너비 속성들은 패딩(padding), 테두리(borders) 또는 여백(margins)을 포함하지 않습니다. 해당 요소의 패딩(padding), 테두리(borders), 여백(margins) 내부 영역의 높이/너비를 설정합니다.\\
\\
======CSS height and width Values======
''height''와 ''width'' 속성들은 하기의 값들을 가질 수 있습니다.\\
\\
  * ''auto'' - 기본 값입니다. 브라우저가 높이와 너비를 계산합니다.
  * ''length'' - px, cm 등의 단위로 높이/너비를 정의합니다.
  * ''%'' - 포함하고 있는 블럭(block)의 백분율로 높이/너비를 정의합니다.
  * ''initial'' - 높이/너비를 기본 값으로 설정합니다.
  * ''inherit'' - 높이/너비는 부모 요소의 값을 상속받습니다.
\\
======CSS height and width Examples======
====예제====
<div> 요소의 높이와 너비를 설정합니다.
<code css>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</code>
\\
====예제====
다른 <div> 요소의 높이와 너비를 설정합니다.
<code css>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</code>
\\
  * ''height''와 ''width''속성들은 패딩(padding), 테두리(borders) 또는 여백(margins)을 포함하지 않습니다.\\ 
  * ''height''와 ''width''속성들은 패딩(padding), 테두리(borders), 여백(margins) 안쪽에 있는 영역의 높이/너비를 설정합니다.\\
\\
======Setting max-width======
''max-width'' 속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.\\
\\
''max-width''는 px, cm 등과 같은 길이 값(length values)으로 지정되거나, 포함하고 있는 블럭(block)의 백분율로, 또는 아무것도 없는 것(이것이 기본 설정입니다. 최대 너비가 없다는 것을 의미합니다)으로 설정됩니다.\\
\\
상기 예제에서 <div>의 문제는 브라우저 화면이 해당 요소의 너비(500px)보다 더 작을 때 생깁니다. 그렇게 되면 브라우저는 페이지에 수평 스크롤바를 추가합니다.\\
\\
이런 상황에서 대신에 ''max-width''를 사용하는 것은 작은 화면에서 브라우저를 다루는 것을 개선합니다.\\
\\
  * Note : ''max-width''속성 값은 ''width'' 속성을 무시합니다.
====예제====
<div> 요소는 100px의 높이와 최대너비 500px를 가집니다.
<code css>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</code>
\\
=====All CSS Dimension Properties=====
^ Property    ^ Description          ^
| height      | 한 요소의 높이를 설정합니다.     |
| max-height  | 한 요소의 최대 높이를 설정합니다.  |
| max-width   | 한 요소의 최대 너비를 설정합니다.  |
| min-height  | 한 요소의 최소 높이를 설정합니다.  |
| min-width   | 한 요소의 최소 너비를 설정합니다.  |
| width       | 한 요소의 너비를 설정합니다.     |









{{tag>오션, CSS Height, Width }}