반응형 웹(9) - 모듈화 디자인

반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 봐도 무방하다. 

 

웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.

컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다.

 

모듈화된 디자인은 작업 효율에 많은 도움이 된다. 여러 개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추어 웹을 만들면 일이 줄게 된다.

 

모듈화란 ?

 

개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것

 

 

모듈화가 주는 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
• 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
• 페이지의 일관성을 유지하기가 용이하다.

 

* reset.css

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}