공부

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

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

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

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

모듈화란 ?

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

모듈화가 주는 이점

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

* reset.css

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

/* 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;
}

이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점입니다.

max-width

CSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 크 이상 커지지 않게 한다.

img{
	max-width: 200px;
}


/* 부모 요소의 크기에 따라 변하지만 부모 요소의 크기보다는 커질 수 없다. */
img{
	max-width: 100%;
}

picture

HTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다.

<picture>
	<source scrset="desktop.png" media="(min-width: 1200px)">
    <source scrset="tablet.png" media="(min-width: 800px)">
    <img scr="mobile.png">
</picture>

정리 

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다

• 미디어 타입
• 조건에 대한 물음(쿼리)

@media 미디어_타입 and (조건에_대한_물음) {
	/*
    	미디어 타입과 조건을
        모두 만족할 때 덮어씌울
        스타일 선언문
    */
}

구체적인 사용 예시

@media screen and (max-width: 768px){ // 768px 이하
	/*
    	화면(screen)의 너비가 768px 이하일 경우에
        여기에 정의된 스타일 선언문을 추가 적용할 것이다.
   	*/
}


@media screen and (min-width: 800px) { // 800px 이상
	/*
	화면(screen)의 너비스 800px 이상일 경우에
	여기에 적용된 스타일 선언문을 추가 적용할 것이다.
	*/
}

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다.

다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있다.

정리