반응형 웹 Tiny tweaks

 

작은 변화 Tiny tweaks

 

작은 변화 패턴은 말 그대로 글꼴 크기나 이미지 크기를 조정하거나 매우 사소한 방법으로 컨텐츠를 이동시키는 등의 레이아웃의 작은 변화만 이루어진다. 이 패턴은 일직선의 one page 웹사이트와 같은 단일 열 레이아웃에서 잘 작동한다.

 

 

css  

* {margin:0; padding:0;}
	ul {list-style:none;}
	
	#box_a {height:400px; background:#f1779e;}
	.list_man {margin:0 auto; width:80%; padding-top:50px;}
	.list_man li {width:18%; margin:1%; background:#fff; float:left;}
	
	@media screen and (max-width:1024px){
		.list_man {width:95%;}
		.list_man li {width:23%; maring: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%;}
	}

html

		

			
a
			
b
			
c
			
d
			
e
			
f
			
g
			
h
			
i
			
j
		
	

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