[용어정리] Part3 CSS | 반응형디자인&미디어쿼리

MI개발자 2022. 1. 12. 12:43

Front-end 로드맵 따라하기

이미지 출처 : https://medium.com/level-up-web/a-sneak-peek-at-intrinsic-web-design-cb179eea7c9e

(요약) 키워드로 알아보기

✨반응형 디자인이란?
- 반응형 웹 디자인은 HTML과 CSS만 사용한다 즉, 프로그램이나 JavaScript가 아니다
- 웹사이트가 와이드스크린 모니터에서 휴대폰에 이르기까지모든 환경에서 똑같이 잘 표시되어야 한다.
- 반응형 디자인은 CSS "미디어 쿼리"를 통해 수행된다.

✨미디어 쿼리란?
- 반응형 웹을 만들기 위한 CSS선언 중 하나이다.
- CSS 규칙을 조건부로 적용하는 방법으로 미디어 쿼리를 생각하자.
- 사용자의 기기에 따라 특정 규칙을 무시하거나 적용해야 한다고 브라우저에 알려준다
internetingishard 사이트는 꼭꼭! 읽어봤으면좋겠다.

더 알아보기

CONTENT IS LIKE WATER
- 웹사이트를 만들 때, 콘텐츠를 물과 같이 만들어라 -

You put water into a cup it becomes the cup.

You put water into a bottle it becomes the bottle.

You put water into a teapot, it becomes the teapot.

즉, 콘텐츠는 담기는 컨테이너에 따라서 콘텐츠가 유동적으로 변화해서
그 컨테이너에 맞게 내용들이 잘 보여질 수 있도록 디자인해야된다는 말이다.
따라서 이것을 우리는 Responsive Design(반응형 디자인)이라고한다.

유동적인 Layout을 구현하기위해, (예전) float같은 것 & 고정된 px값을 사용하지 않는다.
Flex grid, Flex box,%, vw, vh 이와같은 속성값을 이용하여 사이즈를 많이 구성한다.

그럼, 웹반응형을 구현할 때 어느 시점(포인트 지점)에서 레이아웃 재배치를 해야 될까?

웹사이트를 만들때,
어디서부터~ 까지 데스크탑사이즈로 보여주고,
어디서부터~ 까지 테블릿으로 보여주며 ,

어디서부터~ 까지 모바일형태로 보여줄껀지를 감안해서 웹사이트를 만들어야한다.

그런데, 예전에는 이런 사이즈가 조금 더 명확하게 정해져 있었지만, 최근에는 확실히 구분짓는 브레이크포인트(breakpoint)가 정해져있지 않다. 하지만,굳이! 나누자면?

모바일은 320px~480
테블릿은 768px~1024px

1024~ 부터는 데스크탑 사이즈로 간주해서 디자인하면 무난하다.

이제, 반응형 웹을 어떻게 만들어지는지 본격적으로 만들어 보도록하자.

❗ 반응형 웹을 만들기 위해서는 2가지 요건이 충족해야된다.
1) HTML의 viewport meta 태그가 필요하다.
2) CSS의 Media Queries문이 선언이 되어야한다.

사용자가 사용하고있는 브라우저 창의 크기의 화면사이즈
veiwport

반응형을 하기 위해서 <head> ... </head>안에 viewport meta가 선언되어있어야한다.

해석 :
"viewport에 관해서 정보를 줄꺼야. 앞으로 이 웹페이지 width(가로)사이즈를 잡을때는 사용자가 사용하고 있는 device-width(디바이스크기)에 맞춰줘~" 라고 선언을 해야 반응형 웹이 정상적으로 작동된다.
예) 예전 민원24사이트의 홈페이지를 예로 들어보겠다. (현재는 반응형으로 바뀌었다)

(잘 안보이지만) 왼쪽과 같이 핸드폰사이즈로 변경이되도, 크기가 고정되어있는거를 확인 할 수 있는데, iewprot meta 태그가 들어가 있긴하지만, 1270으로 고정이되어있다. 따라서, 여기서 다시 정리를 하자면, 반응형웹을 만들기 위해서는 HTML에다가 viewport 태그를 선언을 하고, content는 반드시width=divice-width라고 적어줘야한다. 그다음! 비로서 css로 미디어쿼리를 선언해야, device사이즈에 반응을 하는 반응형 웹사이트를 만들 수 있다.

이제 본격적으로 css 미디어쿼리를 알아보자 ! 미디어쿼리에서 무엇을 알려줘야할까? 내가 지금 보고있는 화면의 사이즈가 몇px이상일때 혹은 몇 px이하일때는 이 style을 적용해줘~ 라고 선언을해준다.

@media선언을할꺼야, screen에관해 이야기를 할껀데, 최소 브라우저의 가로 사이즈가 768px이상에서는 {이런스타일을 먹여줘 ~~즉, 새로운 css공간이 생긴다고 생각한 후, 변화해야하는 값을 적어준다~~ } 라고 하는것이 바로, 미디어쿼리 선언이다.