목차

CSS Height / Width

  • description : CSS Height / Width
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-05


Source of the article



CSS Height and Width

CSS heightwidth속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다

CSS max-width속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.

CSS Setting height and width

heightwidth 속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다.

높이와 너비 속성들은 패딩(padding), 테두리(borders) 또는 여백(margins)을 포함하지 않습니다. 해당 요소의 패딩(padding), 테두리(borders), 여백(margins) 내부 영역의 높이/너비를 설정합니다.

CSS height and width Values

heightwidth 속성들은 하기의 값들을 가질 수 있습니다.


CSS height and width Examples

예제

<div> 요소의 높이와 너비를 설정합니다.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}


예제

다른 <div> 요소의 높이와 너비를 설정합니다.

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}



Setting max-width

max-width 속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.

max-width는 px, cm 등과 같은 길이 값(length values)으로 지정되거나, 포함하고 있는 블럭(block)의 백분율로, 또는 아무것도 없는 것(이것이 기본 설정입니다. 최대 너비가 없다는 것을 의미합니다)으로 설정됩니다.

상기 예제에서 <div>의 문제는 브라우저 화면이 해당 요소의 너비(500px)보다 더 작을 때 생깁니다. 그렇게 되면 브라우저는 페이지에 수평 스크롤바를 추가합니다.

이런 상황에서 대신에 max-width를 사용하는 것은 작은 화면에서 브라우저를 다루는 것을 개선합니다.

예제

<div> 요소는 100px의 높이와 최대너비 500px를 가집니다.

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}


All CSS Dimension Properties

Property Description
height 한 요소의 높이를 설정합니다.
max-height 한 요소의 최대 높이를 설정합니다.
max-width 한 요소의 최대 너비를 설정합니다.
min-height 한 요소의 최소 높이를 설정합니다.
min-width 한 요소의 최소 너비를 설정합니다.
width 한 요소의 너비를 설정합니다.