본문 바로가기
뚝딱뚝딱웹공장

반응형 웹페이지 드롭 칼럼

by 솔파파 대류 2021. 4. 2.
<!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>

댓글0