w3.css
동일한 높이
CSS를 사용하여 높이가 같은 열을 만드는 방법을 알아보자.
동일한 높이의 열을 만드는 방법
1단계) HTML 추가
<div class="col-container"> <div class="col"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col"> <h2>Column 2</h2> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </div> <div class="col"> <h2>Column 3</h2> <p>Some other text..</p> <p>Some other text..</p> </div> </div>
2단계) CSS 추가
.col-container { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */ } .col { display: table-cell; /* Make elements inside the container behave like table cells */ }
기본 예시
예제 보기반응형 동일 높이
이전 예에서 만든 열은 반응형이다(시도해보기 예에서 브라우저 창 크기를 조정하면 필요한 너비와 높이로 자동으로 조정되는 것을 볼 수 있다). 그러나 작은 화면(예: 스마트폰)의 경우 가로가 아닌 세로로 쌓기를 원할 수 있다.
예제
@media only screen and (max-width: 600px) { .col { display: block; width: 100%; } }
기본 예시
예제 보기Flexbox를 사용하여 높이와 너비를 동일하게 만들기
Flexbox를 사용하여 높이가 같은 상자를 만들 수도 있다.
⭐ Flexbox는 Internet Explorer 10 및 이전 버전에서는 지원되지 않는다.
예제
.col-container { display: flex; width: 100%; } .col { flex: 1; padding: 16px; }
기본 예시
예제 보기참고
W3C School - How TO - Equal Height