방법 - 동일한 높이
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 */
}
반응형 동일 높이
이전 예제에서 만든 열은 반응형입니다(사용해 보기 예제에서 브라우저 창의 크기를 조정하면 필요한 너비와 높이로 자동 조정되는 것을 볼 수 있습니다). 그러나 스마트폰과 같은 작은 화면의 경우 가로 대신 세로로 쌓기를 원할 수 있습니다.
중형 및 대형 화면:
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
작은 화면에서:
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
안녕하세요 월드입니다.
이를 달성하려면 미디어 쿼리를 추가하고 이것이 발생해야 하는 시점에 대한 중단점 픽셀 값을 지정합니다.
예시
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Flexbox를 사용한 동일한 높이 및 너비
Flexbox를 사용하여 동일한 높이의 상자를 만들 수도 있습니다.
예시
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
참고: Flexbox는 Internet Explorer 10 및 이전 버전에서 지원되지 않습니다.
팁: CSS Flexbox Tutorial 에서 유연한 상자에 대해 자세히 읽어보세요 .