반응형 웹 Layout shifter

 

레이아웃 시프터 Layout shifter

 

레이아웃 시프터 패턴은 여러개의 중단점(breakpoints)를 두어 여러 스크린의 너비에 가장 민감하게 반응하는 패턴이다. 이 패턴의 핵심은 열을 흘려보내고 떨어뜨리는 방식 대신에 컨텐츠를 이동시키는 방법이라는 것이다. 중단점(breakpoints)사이에 차이점이 매우 크기 때문에 레이아웃 유지가 어렵고 전체 레이아웃 뿐 아니라 요소안의 변화도 수반될 수 있다.

 

 

css  

* {margin:0; padding:0;}
	#wrap {width:1000px; margin:0 auto;}
	#box_a {height:400px; background:#fcb354; float:left; width:20%;}
	#box_b {height:200px; background:#f1779e; width:80%; float:left;}
	#box_c {height:200px; background:#24bbaf; width:80%; float:left;}
	
	@media screen and (max-width:1024px){
		#wrap {width:90%;}
	}
	
	@media screen and (max-width:800px){
		#wrap {width:100%;}
		#box_a {float:none; width:100%;}
		#box_b {float:none; width:100%;}
		#box_c {float:none; width:100%;}
	}

html

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