[CSS] 요소의 높이를 제어 {height: value;}

height 속성은 요소의 콘텐츠를 감싸는 상자의 세로 크기를 지정하여 요소의 높이를 제어하는 ​​데 사용됩니다. 

height 속성은 블록 수준 및 대체 요소(예: image, iframe) 모두에 적용됩니다. 고정 높이 값, 부모 높이의 백분율을 설정하거나 다른 측정 단위를 사용하여 요소 높이를 정의할 수 있습니다.

 

selector {
  height: value;
}

selector : height 속성이 적용될 HTML 요소를 나타냅니다.
value : 요소의 높이를 지정합니다. 고정 값(예: 100px), 백분율 값(예: 부모 높이의 50%) 또는 기타 유효한 CSS 단위(예: em, rem, vh, vw등)일 수 있습니다.

 

.container {
  height: 300px;
}

.image {
  height: 50%;
}

.header {
  height: 80px;
}

위의 예에서 CSS 규칙은 container 클래스가 있는 요소에 300픽셀의 높이를 적용하고 image 클래스가 있는 요소에 부모 높이의 50%를 적용하고 header 클래스가 있는 요소에 80픽셀을 적용합니다.

요소 내의 콘텐츠가 지정된 높이보다 크면 오버플로되어 스크롤바가 나타날 수 있습니다(오버플로가 명시적으로 숨겨지거나 다른 방법이 오버플로를 처리하는 데 사용되지 않는 한).

height 속성이 명시적으로 설정되지 않은 경우 요소의 높이는 컨텐츠의 자연 높이(컨텐츠의 높이 또는 하위 요소의 높이)에 의해 결정됩니다. 이것은 종종 요소의 "콘텐츠 높이"라고 합니다.

height: auto;가 있는 요소의 경우 높이가 내용에 맞게 조정되며 필요에 따라 확장 또는 축소됩니다.

고정 높이를 설정할 때 다른 화면 크기 또는 장치에서 레이아웃 문제가 발생할 수 있으므로 주의하십시오. 

반응형 디자인은 종종 다양한 화면 크기에 적응하기 위해 백분율 및 뷰포트 단위(vh 및 vw)와 같은 상대적인 단위에 의존합니다.

전반적으로 height 속성은 요소의 세로 크기를 제어하는 ​​데 중요한 도구이며 CSS에서 시각적으로 매력적이고 잘 구성된 레이아웃을 만드는 데 자주 사용됩니다.