<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>반응형 웹페이지 드롭 칼럼</title>
<style>
* {margin:0; padding:0;}
#box_a {
height:400px; background:#ff9900; width:35%; float:left;
}
#box_b {
height:400px; background:#eee; width:30%; float:left;
}
#box_c {
height:400px; background:#f00000; width:35%; float:right;
}
@media screen and (max-width:1024px) {
#box_b {float:none; width:auto;}
#box_c {float:none; clear:both; width:auto;}
}
@media screen and (max-width:800px) {
#box_a {float:none; width:auto;}
}
</style>
</head>
<body>
<div id="box_a">1
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세.
무궁화 삼천리 화려강산
대한 사람, 대한으로 길이 보전하세
</div>
<div id="box_b">2
남산 위에 저 소나무, 철갑을 두른 듯
바람서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한 사람, 대한으로 길이 보전하세
</div>
<div id="box_c">3
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세.
무궁화 삼천리 화려강산
대한 사람, 대한으로 길이 보전하세
</div>
</body>
</html>
뚝딱뚝딱웹공장
댓글