혼합 열 레이아웃을 어떻게 만드는가
CSS를 사용하여 혼합 열 레이아웃 그리드를 만들어 보세요.
화면 너비에 따라 네 열, 두 열, 전체 너비 열로 변환되는 반응형 열 레이아웃을 만들어 보세요.
브라우저 창 크기를 조절하여 반응형 효과를 확인할 수 있습니다:
혼합 열 레이아웃을 어떻게 만드는가
第一步 - HTML 추가:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
第二步 - CSS 추가:
이 예제에서는 네 열 레이아웃을 만들고, 너비가 900픽셀 미만인 화면에서는 두 열로 변환됩니다. 그러나 너비가 600픽셀 미만인 화면에서는 열이 가로로 배치되지 않고 쌓입니다.
/* 네 개의 동일한 너비의 열을 만들어서 float을 함께 사용합니다 */
.column {
float: left;
width: 25%;
}
/* float을 지우는 것 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 반응형 레이아웃 - 네 열 대신 두 열로 레이아웃을 변경합니다 */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* 반응형 레이아웃 - 두 열을 가로로 배치하지 않고 쌓이게 만듭니다 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
관련 페이지
강의:CSS 웹 레이아웃
