반응형 웹 Off canvas

 

오프 캔버스 Off canvas

 

오프 캔버스 패턴은 수직으로 컨텐츠를 쌓기보다는 우선 자주 사용하는 컨텐츠만을 배치한 후 네비게이션이나 매뉴와 같은 요소를 충분히 큰 사이즈의 스크린에서만 보여주고 더 작은 스크린에서는 오직 클릭했을 경우에만 보여준다.

 

 

css  

* {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%;}
	}

html

참조 : http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=11#quick main