너비(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는 요소의 가로 폭과 세로 높이를 각각 지정합니다.

예시 코드:

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

CSS: HTML 요소 크기 제한하기

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

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

max-width

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

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

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

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

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

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

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

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!