너비(Width)와 높이(Height)

CSS의 width와 height 속성은 HTML 요소의 너비(Width)와 높이(Height)를 정합니다.

max-width와 max-height는 HTML 요소의 최대 너비와 높이를 제한하고, min-width와 min-height는 HTML 요소의 최소 너비와 높이를 제한합니다.

너비와 높이를 정하는 단위는 픽셀(px), 백분율(%) 등이 있습니다.

"픽셀"은 화면에 그려지는 최소 단위로 기기 및 해상도에 상관 없이 고정된 크기를 지정하고, "백분율"은 요소가 포함된 부모 요소의 크기에 따라 상대적인 크기를 지정합니다.

단위에 대한 자세한 내용은 Chapter 2에서 다루겠습니다.

width와 height

width와 height는 요소의 가로 폭과 세로 높이를 각각 지정합니다.

예시 코드:

복사
.structure {
  width: 300px; /* 건물의 가로 폭이 300픽셀 */
  height: 150px; /* 건물의 세로 높이가 150픽셀 */
}

CSS: HTML 요소 크기 제한하기

웹디자인에서 요소의 크기를 조절하는 것은 사용자 경험을 개선하고 반응형 디자인을 구현하는 데 중요합니다.

max-width, max-height, min-width, min-height 속성으로 요소의 크기를 제한할 수 있습니다.

• max-width 속성은 요소의 최대 너비를 지정합니다.

• 지정된 값보다 넓어지지 않도록 요소의 너비를 제한합니다.

복사
.box {
  max-width: 300px;
  width: 100%;
}

위의 예에서 박스의 너비는 부모 요소의 너비에 따라 늘어나지만 300px를 초과할 수 없습니다.

• max-height 속성은 요소의 최대 높이를 지정합니다.
• 지정된 값보다 높아지지 않도록 요소의 높이를 제한합니다.

복사
.box {
  max-height: 150px;
  height: auto;
}

• min-width 속성은 요소의 최소 너비를 지정합니다.
• 지정된 값보다 좁아지지 않도록 요소의 너비를 보장합니다.

복사
.box {
  min-width: 200px;
  width: 100%;
}

위의 예에서 박스의 너비는 부모 요소의 너비에 따라 줄어들지만 200px보다는 작아지지 않습니다.

• min-height 속성은 요소의 최소 높이를 지정합니다.
• 지정된 값보다 낮아지지 않도록 요소의 높이를 보장합니다.

복사
.box {
  min-height: 100px;
  height: auto;
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.