TIL.47 반응형 웹 디자인

출저

• TechTerms
• MDN

반응형 웹

responsive web design 은 하나의 웹사이트에서 디스플레이 종류 (스마트폰, 태블릿, pc등) 에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법.

A page created using responsive web design includes CSS media queries, which load different styles depending on the width of the window or the type of device used to access the page.

반응형 웹은 fluid layout 과 media queries 를 모두 포함하는 개념으로 두 가지를 모두 이용한 것을 Responsive web 반응형 웹을 구현한다고 말하고 있다.

Fluid layout

This is accomplished by defining areas of the page using percentages instead of fixed pixel widths.

레이아웃을 디자인할 때 (css속성을 이용하여 style을 줄 때) px 단위 같이 고정된 값보다는 Flex frid, Flex box, %, vw, vh 와 같은 단위를 사용한다.
이는 상대적인 단위를 사용함으로써 변화하는 브라우저에 유동적으로 바뀌는 레이아웃을 구현할 수 있다.

Media queries

Media queries act as filters for different screen sizes. Like all modules within a cascading style sheet, the ones that appear further down the list override the ones above them.

위와 같은 형태의 미디어 쿼리는 정해진 사이즈에 임의의 속성들을 주는 형태로 만든다. 예를 들어 특정 사이즈 이하에서는 가로로 배치되어 있던 박스를 세로로 배열하는 것을 말한다.

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

위의 예시는 최대 768px까지 아래의 선택자들의 속성들이 각각의 값만큼 유지된다는 것을 뜻한다.

반응형 css 단위

상대적으로 변하는 값의 대상

• 부모일 경우에는 %, em
• 브라우저일 경우는 viewport단위, rem
• 요소의 너비와 높이에 따라서 값이 변해야 할 경우 %, viewport
• 폰트사이즈에 따라 변하는 경우는 em, rem

em

relative to parent element

• 부모요소의 폰트사이즈에 따라 상대적으로 크기가 달라진다.
• 부모의 기준으로 달라지기 때문에 컴포넌트에 따라 그에 맞는 값으로 바뀐다.

rem

relative to root elememt

• 루트에 있는 폰트사이즈에 따라 크기가 달라진다.
• em과 달리, 부모의 폰트사이즈와는 상관없이 페이지 어디에서든 같은 값을 유지한다.

실제 적용

위의 네비게이션을 보면 가로길이를 줄여도 형태가 잘리지 않고 그대로 유지하면서 줄어드는 것을 볼 수 있다.

일단, 기준이 되는 큰 틀의 크기를 Wrapper 라고 정해놓고 여기에 가로 값을 42em 으로 주었다.
그런다음, 그 안에 들어가는 모든 박스, 컴포넌트 들의 크기는 아래 NavWrappr 에서 준 값과 같이 상대적인 값 인 % 로 지정하면 전체 틀이 줄어드는 것에 따라 크기가 바뀌는 것을 볼 수 있다.