단드롭패턴 w/ 미디어쿼리|작성자
본문
◆ 메타 태크 작성(헤드)
<head>
<meta charset="utf-8">
<title>단드롭 패턴</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
◆ Div 요소 작성
<style type="text/css">
#container div{min-width:140px;min-height:150px;}
#container{display:flex;flex-flow:row wrap;}
.c1{background-color:#003476;}
.c2{background-color:#18709c;}
.c3{background-color:#19bdc4;}
.c4{background-color:#fff6ee;}
.c5{background-color:#ef4089;}
</style>
◆ 요소 배치 (html)
<body>
<div id="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
</div>
</body>
◆ 미디어쿼리 작성
<style type="text/css">
.c1,.c2,.c3,.c4,.c5{width:100%;}
@media(min-width:600px){/*작은 화면에서 3개 당 1줄 들어가게 배치*/
/*order..div의 배치순서를 강제로 정함*/
.c1{width:33.33%;order:1;}
.c2{width:33.33%;order:2;}
.c3{width:33.33%;order:3;}
.c4{width:33.33%;order:4;}
.c5{width:33.33%;order:5;}
}
@media(min-width:1000px){/*큰 화면에서 5개 나란히 배치*/
.c1,.c2,.c3,.c4,.c5{width:20%;}
}
</style>
결과
댓글목록
등록된 댓글이 없습니다.