RWD

From. 반응형 웹디자인 - 어비의 실무노트 / 위키북스

http://bradfrost.github.io/this-is-responsive/patterns.html

http://www.responsivejs.com/

http://getbootstrap.com/

http://foundation.zurb.com/



Mostly Fluid

반응형 웹디자인에서 가장 많이 사용하는 패턴으로, Wide PC에서는 가변이 아닌 고정형으로 가고 이보다 작아지면 양쪽은 여백을 남기고 내부는 가변적으로 변하게끔 설정하는 패턴입니다.

Mostly Fluid

						<div id="wrap">
							<div id="box_a"></div>
							<div id="box_b"></div>
							<div id="box_c"></div>
						</div><!-- /wrap -->						
					
						#wrap{width:1000px;margin:0 auto;}
						#box_a{height:400px;background:#f1779e;}
						#box_b{height:400px;background:#fcb354;width:50%;float:left;}
						#box_c{height:400px;background:#24bbaf;width:50%;float:right;}

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

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

						@media screen and (max-width:480px) {
							#box_b{float:none;width:auto;}
							#box_c{float:none;width:auto;}
						}				
					


Column Drop

가로로 정렬돼 있던 요소가 해상도에 따라 세로로 정렬되는 모습을 볼 수 있습니다.

Column Drop

						<div id="wrap">
							<div id="box_a"></div>
							<div id="box_b"></div>
							<div id="box_c"></div>
						</div><!-- /wrap -->						
					
						#box_a{height:400px;background:#f1779e;float:left;width:30%;}
						#box_b{height:400px;background:#fcb354;width:50%;float:left;}
						#box_c{height:400px;background:#24bbaf;width:20%;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;}
						}			
					


Shifter

세로와 가로 정렬이 혼합된 모습으로 PC 웹사이트와 모방일 웹사이트 사이의 GNB 영역(Global Navigation Bar - 페이지마다 항상 위치하기 되는 주메뉴 영역)의 변화가 가장 큽니다. 자칫하면 다른 사이트로 보일 수도 있으나, 이질감을 느끼지 않게 룩앤필(Look & Feel)을 유지하면서 변형한다면 오히려 사용자에게 참신하고 좋은 노낌을 줄 수도 있습니다.

Shifter

						<div id="wrap">
							<div id="box_a"></div>
							<div id="box_b"></div>
							<div id="box_c"></div>
						</div><!-- /wrap -->						
					
						#wrap{width:1000px;margin:0 auto;}
						#box_a{height:400px;background:#f1779e;float:left;width:20%;}
						#box_b{height:200px;background:#fcb354;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:auto;}
							#box_b{float:none;width:auto;}
							#box_c{float:none;width:auto;}
						}		
					


Tiny Tweaks

PC부터 모바일까지 모두 같은 형태로 디자인하는 방식으로, 간단한 사이트 또는 리스트 형태로 꾸며진 사이트에 사용할 패턴으로 적합합니다.

Tiny Tweaks

						<div id="box_a">
							<ul class="list_man">
								<li>a</li>
								<li>b</li>
								<li>c</li>
								<li>d</li>
								<li>e</li>
								<li>f</li>
								<li>g</li>
								<li>h</li>
								<li>i</li>
								<li>j</li>
							</ul>
						</div><!-- /box_a -->					
					
						#box_a{background:#f1779e;}
						.list_man{margin:0 auto;width:80%;padding-top:50px;padding-bottom:50px;}
						.list_man:after{ content:""; display:block; clear:both; font-size:0; line-height:0; visibility:none;}
						.list_man li{width:18%;margin:1%;background:#fff;float:left;height:100px;line-height:100px;text-align:center;font-weight:bold;color:#000;}

						@media screen and (max-width:1024px) {
							.list_man{widht:95%;}
							.list_man{widht:23%;margin:1%;}
						}

						@media screen and (max-width:800px) {
							.list_man li{width:31.333%;margin:1%;}
						}

						@media screen and (max-width:480px) {
							.list_man li{width:48%;margin:1%;}
						}	
					


Off Canvas

Off Canvas 패턴은 PC 웹사이트를 모바일 디바이스로 가져오면서 콘텐츠의 크기와 양을 줄이지 않는 새로운 방법으로, 일부 영역을 숨겨서 사용자의 제스터 혹은 액션에 따라 숨겨뒀던 영역을 보여주는 방식입니다. 작은 디바이스에서 많은 것을 보여주는 방법보다 더 편한 UX를 적용해 사용하며 페이스북 모방일 웹, 앱 등에서 많이 사용하고 있는 패턴입니다.

Off Canvas 패턴은 단순하게 HTML과 CSS로 이뤄지는 경우는 없습니다. 대부분 자바스크립트와 제이쿼리 등을 이용해 작업합니다.

Off Canvas

						<div id="wrap">
							<div id="box_a"></div>
							<div id="box_b"></div>
							<div id="box_c"></div>
						</div><!-- /wrap -->						
					
						#wrap{width:1000px;margin:0 auto;}
						#wrap_box{width:100%;display:block;}
						#box_a{height:400px;background:#f1779e;float:left;width:30%;}
						#box_b{height:400px;background:#fcb354;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.3333%;}
							#box_b{width:33.3333%;}
							#box_c{width:33.3333%;}
						}

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

http://foundation.zurb.com/docs/components/offcanvas.html

http://zurb.com/playground/off-canvas-layouts

http://jasonweaver.name/lab/offcanvas/

http://www.lukew.com/ff/entry.asp?1569

http://www.lukew.com/ff/entry.asp?1570

http://getbootstrap.com/examples/offcanvas/