Responsive Web Design 반응형 웹디자인

모바일이나 테블릿이 없던 시절에는 데스크탑용으로만 웹사이트를 만드는 것이 너무나도 당연한 일이었지만 모바일과 테블릿 등 다양한 기기로 웹사이트를 접속하는 현재로서는 반응형으로 웹사이트를 만드는 것이 굉장히 중요해졌다.
반응형이 아닌 웹사이트들은 사이즈를 줄이게 되면 컨텐츠들이 잘려서 일일이 스크롤을 해서 봐야하는 번거로움이 있지만반응형 웹사이트는 사이즈에 따라 컨텐츠들이 이동하기 때문에 사용자들이 웹사이트를 편리하게 이용할 수 있다.

레이아웃을 짤때에는 고정적인 레이아웃(fixed-width layout)이 아닌 유동적인 레이아웃(fluid layout)을 만드는 것이 좋다.
이때 사용하는 것이 flex grid, flex box, vh, vw, % 이다.
하지만 어느정도 사이즈에 도달하면 컨텐츠가 재배치되어야할 때도 있는데 이때 사용하는 것이 미디어 쿼리이다.

사이즈를 정하는 유닛 (absolute length units vs. relative length units)

absolute - px 모니터위에서 화면에 나타낼수 있는 가장 작은 단위
relative - em, rem, vw, wh, %

em : em과 rem은 font-size 속성 값에 비례해서 결정되는 상대 단위이다. em은 부모의 폰트사이즈에 상대적으로 자식의 사이즈가 계산되어진다.
rem : 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다.
% : 부모 요소에 상대적으로 크기가 계산되어진다.
vw : viewport의 width 너비
vh : viewport의 height 높이

미디어 쿼리(Media Query)

css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다.
if문과 비슷한 개념이라고 생각하기!

<style>
	@media 미디어 유형 and (조건) {
    	스타일
    }
</style>

미디어 유형 : 어떤 미디어를 위한 것인지 브라우저에 알려주는 것.(선택사항, 기본값은 all)

• all
• print
• screen
• speech

조건 : min-width(height)와 max-width(height), width(height)등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있다.
실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하기 때문에 width 또는 height값을 사용하는 경우는 흔치 않다.

:root 가상 클래스

웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.
:root 선택자는 웹 문서 구조에서 가장 상위 요소(html문서에서는 html)을 선택할 때 사용한다.
최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 한 번에 수정하기 용이하다는 장점이 있다.

<style>
<!--변수 선언-->
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-yellow: #fbbe28;

/* size */
--base-space: 8px;
--size-button: 60px;
--size-border: 4px;
--font-size: 18px;
}

<!--변수 사용-->
.colorBtn {
	font-size: var(--font-size);
    padding: calc(var(--base-space) * 1.8);
    /* calc(): 계산식 지정 */
    border-radius: var(--size-border);
}
.item {
	background-color: var(--color-white);
    display: flex;
    align-items: center;
    padding: var(--base-space);
    margin-bottom: var(--base-space);
}
</style>