CSS 높이와 너비

이 요소의 너비는 100%입니다.

CSS에서 높이와 너비 설정

height 와 width 속성은 요소의 높이와 너비를 설정하는 데 사용됩니다.

height와 width 속성은 내간격, 경계선 또는 여유를 포함하지 않습니다. 그들은 요소의 내간격, 경계선 및 여유 내의 영역의 높이 또는 너비를 설정합니다.

CSS 높이와 너비 값

height 와 width 속성은 다음과 같은 값을 설정할 수 있습니다:

  • auto - 기본 값. 브라우저가 높이와 너비를 계산합니다.
  • length - 높이/너비를 px, cm 등으로 정의합니다.
  • % - 높이/너비를 포함 블록의 백분율로 정의합니다.
  • initial - 높이/너비를 기본 값으로 설정합니다.
  • inherit - 부모 값에서 높이/너비를 继承합니다.

CSS 높이와 너비 예제

이 요소의 높이는 200 픽셀, 너비는 50%입니다.

实例

요소의 높이와 너비를 설정합니다:

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

亲自试一试

이 요소의 높이는 100 픽셀, 너비는 500 픽셀입니다.

实例

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

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

亲自试一试

참고:기억해야 합니다height 와 width 속성은 내간격, 경계선 또는 여유를 포함하지 않습니다! 그들은 요소의 내간격, 경계선 및 여유 내의 영역의 높이/너비를 설정합니다!

max-width 설정

max-width 속성은 요소의 최대 너비를 설정하는 데 사용됩니다.

를 사용할 수 있습니다. 또는 max-width을 none으로 설정할 수도 있습니다. 기본 값은 none입니다. 이는 최대 너비가 없다는 의미입니다.

브라우저 창이 요소 너비보다 작을 때, 이전에 나온 <div> 의 문제를 해결합니다. 그런 다음, 브라우저는 페이지에 수평 스크롤 바를 추가합니다.

이 경우, max-width 브라우저가 작은 창을 처리하는 것을 개선할 수 있습니다.

提示：브라우저 창을 500px보다 작은 너비로 드래그하여 두 div 간의 차이를 확인하세요!

이 요소의 높이는 100 픽셀, 최대 너비는 500 픽셀입니다.

이 요소의 높이는 100 픽셀, 최대 너비는 500 픽셀입니다.

备注：max-width 속성의 값은 덮어씁니다 width（너비）。

实例

이 <div> 요소의 높이는 100 픽셀, 최대 너비는 500 픽셀입니다:

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

亲自试一试

更多实例

요소의 높이와 너비 설정
다른 요소의 높이와 너비를 설정하는 방법을 보여줍니다.
백분율로 이미지의 높이와 너비 설정
이 예제는 이미지의 높이와 너비를 백분율 값으로 설정하는 방법을 보여줍니다.
요소의 최소 너비와 최대 너비 설정
이 예제는 요소의 최소 너비와 최대 너비를 픽셀 값으로 설정하는 방법을 보여줍니다.
요소의 최소 높이와 최대 높이를 설정합니다.
이 예제는 픽셀 값으로 요소의 최소 높이와 최대 높이를 설정하는 방법을 보여줍니다。

CSS 크기 속성 설정

속성 설명
height 요소의 높이를 설정합니다。
max-height 요소의 최대 높이를 설정합니다。
max-width 요소의 최대 너비를 설정합니다。
min-height 요소의 최소 높이를 설정합니다。
min-width 요소의 최소 너비를 설정합니다。
width 요소의 너비를 설정합니다。