[CSS] 10. CSS Height, Width and Max-width 높이, 너비 및 최대 너비

Posted by 낭만사업가 정대표 블로그 on 2022-08-04 07:16:49

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

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


이 요소는 높이가 50픽셀이고 너비가 100%입니다.


직접 사용해 보기 »


CSS 높이 및 너비 설정

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

높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함되지 않습니다. 요소의 패딩, 테두리 및 여백 내부 영역의 높이/너비를 설정합니다.


CSS 높이 및 너비 값

height 및 속성 은  width 다음 값을 가질 수 있습니다.

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

CSS 높이 및 너비 예

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

예시

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

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

직접 사용해 보기 »

이 요소는 높이가 100픽셀이고 너비가 500픽셀입니다.

예시

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

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

직접 사용해 보기 »

참고: height  및 속성에는 패딩  width , 테두리 또는 여백이 포함되지 않습니다. 요소의 패딩, 테두리 및 여백 내부 영역의 높이/너비를 설정합니다!

최대 너비 설정

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

px, cm 등과 같은 길이 값 또는 포함하는 블록 의 백분율(%)로  max-width 지정 하거나 없음으로 설정할 수 있습니다(기본값입니다. 최대 너비가 없음을 의미).

위와 같은 문제  <div> 는 브라우저 창이 요소의 너비(500px)보다 작을 때 발생합니다. 그런 다음 브라우저는 페이지에 가로 스크롤 막대를 추가합니다.

이 상황에서 대신 사용  max-width 하면 브라우저의 작은 창 처리가 향상됩니다.

팁: 브라우저 창을 500px 너비보다 작게 드래그하여 두 div의 차이를 확인하세요!

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

참고: 어떤 이유로 동일한 요소에서  width 속성과 속성 을 모두 사용하고 속성 값이 속성 보다 큰 경우 속성이 사용되며 속성 은 무시됩니다. max-width width max-width max-width width

예시

이 <div> 요소는 높이가 100픽셀이고 최대 너비가 500픽셀입니다. 

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

직접 사용해 보기 »


직접 해보십시오 - 예

요소의 높이와 너비
설정 이 예제에서는 다양한 요소의 높이와 너비를 설정하는 방법을 보여줍니다.

백분율을 사용하여 이미지의
높이와 너비 설정 이 예제에서는 백분율 값을 사용하여 이미지의 높이와 너비를 설정하는 방법을 보여줍니다.

요소
의 최소 너비 및 최대 너비 설정 이 예제에서는 픽셀 값을 사용하여 요소의 최소 너비와 최대 너비를 설정하는 방법을 보여 줍니다.

요소
의 최소 높이 및 최대 높이 설정 이 예제에서는 픽셀 값을 사용하여 요소의 최소 높이와 최대 높이를 설정하는 방법을 보여줍니다.

 

모든 CSS 차원 속성

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

Total 164
번호 제목 글쓴이 조회 날짜
39 07-15
214 07-15
162 28 07-20
161 24 07-20
160 19 07-20
159 25 07-20
158 20 07-20
157 19 07-20
156 92 06-20
155 28 07-20
154 931 06-21
153 62 06-20
152 139 02-25
151 756 02-27
150 32 07-08
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!