<!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<br>
동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세.<br>
무궁화 삼천리 화려강산<br>
대한 사람, 대한으로 길이 보전하세
</div><div id="box_b">
2<br>
남산 위에 저 소나무, 철갑을 두른 듯<br>
바람서리 불변함은 우리 기상일세.<br>
무궁화 삼천리 화려강산<br>
대한 사람, 대한으로 길이 보전하세
</div><div id="box_c">
3<br>
가을 하늘 공활한데 높고 구름 없이<br>
밝은 달은 우리 가슴 일편단심일세.<br>
무궁화 삼천리 화려강산<br>
대한 사람, 대한으로 길이 보전하세
</div>
</body>
</html>
