CSS를 사용하여 동일한 높이 열 달성

웹 개발 영역에서 시각적으로 매력적인 레이아웃에 대한 탐구는 종종 동등성에 대한 욕구로 이어집니다. 높이 열. 순수한 CSS를 사용하여 이 효과를 달성하는 것은 어려울 수 있으며 많은 개발자가 배경 이미지와 같은 솔루션으로 전환하게 됩니다. 그러나 더 간단하고 효율적인 방법이 있습니다.

세로 테이블 접근 방식

배경 이미지에 의존하지 않고 동일한 높이의 열을 얻으려면 "수직 테이블" 접근 방식을 사용하세요. 효과적이며 브라우저 간 호환이 가능한 것으로 입증되었습니다. 이 기술에는 상위 div에 display: table 속성을 할당하고 하위 div에 display: table-cell 속성을 할당하는 작업이 포함됩니다.

Implementation

.parent {
  display: table;
}
.child {
  display: table-cell;
}

이 CSS 규칙을 적용하면 상위 div는 표로 변환되고 하위 요소는 표 셀이 됩니다. 따라서 각 셀은 테이블의 수직 공간을 채우고 열의 높이가 동일해집니다.

호환성

이 솔루션은 모든 최신 브라우저와 호환됩니다. 그러나 Internet Explorer 7에서는 작동하지 않는다는 점에 유의해야 합니다. IE7에 대한 지원이 필수적이라면 보다 포괄적인 접근 방식이 필요할 수 있습니다.

결론

"수직 테이블" 방법은 순수 CSS를 사용하여 동일한 높이의 열을 얻는 간단하고 효율적인 방법을 제공합니다. 이 기술을 활용하면 개발자는 배경 이미지나 복잡한 해킹에 의존하지 않고도 시각적으로 일관된 레이아웃을 만들 수 있습니다.