프론트엔드 로드맵 15 - CSS 반응형 디자인과 미디어쿼리

- 뷰포트(viewport) : PC 혹은 그외의 다른 환경에서 사용자가 페이지를 열었을 때 (환경에 맞춰) 너비와 높이가 끊임없이 변화하는 창을 말한다. 이용자가 뷰포트의 사이즈를 조정하면 페이지에 렌더링된 화면 배율 역시 변화한다.

뷰포트 높이와 너비를 자연스러운 사이즈로 디폴트 값을 적용하기 위해 메타 태그를 입력한다.

ex) <meta name="viewport" content="width=device-width, initial-scale=1">

모바일<->웹사이트 크기 조절을 위해 minimum-scale, maximum-scale, initial-scale, user-scalable 속성을 사용한다.

minimum-scale, minimum-scale 값은 뷰포트의 최대값과 최소값을 설정한다. 단, minimum-scale은 initial-scale보다 같거나 더 작은 값을, maximum-scale은 initial-scale보다 같거나 더 큰 값을 적용해야한다.

 

initial-scale은 기기의 사이즈와 뷰포트 사이즈 간의 비율을 정의한다. 이 값은 항상 0과 10 사이의 양의 정수가 온다.

 

user-scalable은 yes/no로 값이 적용되며, 확대 기능의 사용 유무를 정할 수 있다. (웹사이트 크기 조절을 가능하게 하는 것은 별로 좋지 못하다. 접근성과 실용성이 떨어진다)

 

target-densitydpi는 뷰포트 크기에 따라 화면 해상도를 조절한다. 값으로는 device-dpi, hight-dpi, medium-dpi, low-dpi 혹은 DPI 수가 값으로 온다. 이 설정은 거의 사용하지 않지만 픽셀 단위 제어 시 유용하다.

 

반응형 웹(Responsive web) 디자인은 가변적인 레이아웃 구성 (Flexible layout)과 미디어 쿼리로 나눌 수 있다.

- 가변적인 레이아웃은 사이즈 조절에 따라 생동감있게 변화한다. 

 

<미디어 쿼리>

@media 미디어 유형 ( CSS가 적용되기 위한 규칙, 조건 ){}

미디어 유형 : all , print , screen , speech

(미디어 유형은 선택사항. 선택하지 않으면 디폴트 값으로 넘어감)

 

괄호() 안에는 보통 너비의 기준을 설정한다.

1. max-width : 500px => 500px 이하의 미디어 기기에서만 적용됨. (height 값 적용하는 경우는 거의 없음)

2. orientation으로 세로 모드인지 가로 모드인지 정할 수도 있다. orientation : landscape

3. hover:hover 기능도 가능. 

4. not 연산자로 일부만 선택 가능 @media not all and (orientation : landscape)  => 보기가 세로모드일 경우에만 

 

<Mobile First>

반응형은 가장 큰 화면(가령 데스크탑) 기준에서 > 축소하는 방향으로 짜거나,

모바일(가장 작은 화면) 기준에서 > 확대하는 방향으로 짜거나 (Mobile First),

둘 중의 한 가지 방법을 선택할 수 있는데, 모바일 기준 (Mobile First) 방식이 더 최상이라고 본다.

 

 

참고 사이트
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C