Off Canvas 예제모음

디자인

텍스투박스 2015. 7. 21. 11:01

<!doctype html>
	<html>
	<head>
	<meta charset="EUC-KR">
	<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
`	<title>Off Canvas</title>
	<style>
	* {margin:0; padding:0;}
	#wrap {width:1000px; margin:0 auto;}
	#wrap_box {width:100%; display:block;}
	#box_a {height:400px; background:#fcb354; float:left; width:30%;}
	#box_b {height:400px; background:#f1779e; width:40%; float:left;}
	#box_c {height:400px; background:#24bbaf; width:30%; float:left;}

	@media screen and (max-width:1024px) {
	#wrap {width:100%;}
	}

	@media screen and (max-width:800px) {
	#wrap_box { position:absolute; width:150%;}
	#box_a {width:33.333%;}
	#box_b {width:33.333%; float:left;}
	#box_c {width:33.334%; float:left;}
	}

	@media screen and (max-width:480px) {
	#wrap_box {width:300%; margin-left:-100%;}
	}

	</style>
	</head>

	<body>
	<div id="wrap">
	<div id="wrap_box">
	<div id="box_a"></div>
	<div id="box_b"></div>
	<div id="box_c"></div>
	</div>
	</div>
	</body>
	</html>

확장성을 고려한다면, 파운데이션에서 제공하고 있는 오프캔버스가 좋을듯한데,
부트스트랩이 왠지 익숙한 느낌ㅋㅋㅋ

텍스투박스

멀티미티어콘텐츠제작전문가, 컴퓨터그래픽스운용기능사, 웹디자인기능사 자격증 정보 실기문제 풀이정보

텍스투박스