5. Responsive Web Design - Responsive Web Design

이번 Chapter에서는 반응형 웹 디자인을 하는 방법을 배웁니다. 반응형 웹이란 여러 크기의 스크린 사이즈에 대해서 적절하게 화면을 보여주는 것을 의미합니다. 다루는 내용이 적어 30분이면 충분히 다 볼 수 있지만, 자세히 보고 이해하려면 꽤 시간이 걸리는 부분입니다. 빠르게 Subject를 해결했더라도 여기 있는 복습용 자료들을 보고 충분히 이해하시길 바랍니다.

• Create a Media Query
  • Use a media query to change a variable 에서 이미 배운 적이 있는 @media 키워드에 대해 다시 배우는 Subject입니다.
  • 자세한 내용이 궁금하시면 미디어 쿼리 문서를 참고하시길 바랍니다.
• Make an Image Responsive
  • max-width, min-width, max-height, min-height는 width, height와 함께 쓰일 수 있습니다. 둘중 하나를 상대 크기로, 다른 하나를 절대 크기로 하면 다양한 상황을 처리할 수 있습니다. 물론 경우에 따라 상대 크기 2가지를 이용하는 것도 가능할 것으로 보입니다. 또한 max-width, min-width를 같이 설정할 수도 있습니다.
  • 예를 들어 max-width를 50%로 하고 width를 1000px로 했다고 하면 parent의 크기가 2000px이상 일때는 width가 1000px이 되지만, 그 이하일 때는 max-width에 영향을 받아서 50%가 됩니다.
  • 반대로 max-width를 1000px width를 50%로 했다면, parent 크기가 2000px 이하일 때까지는 width의 영향을 받아 50%이지만, 그 보다 높은 경우에는 max-width의 영향을 받아 1000px로 고정됩니다.
• Use a Retina Image for Higher Resolution Displays
• Make Typography Responsive
  • media 방식으로 각각의 크기 별로 css를 설정하는 방식이 아니라 viewport의 크기에 따라 구성 요소를 선택해주는 방식입니다.
  • vw, vh와 같은 방식 외에도 parent의 크기에 따라 상대적으로 크기를 정해주는 방식도 있습니다. width, height값에 %로 값을 넣어주는 방식입니다.

반응형 web에 대해서는 다루는 내용이 적지만 실제 개발에 들어가면 상당히 어려운 부분입니다. 일일이 media query를 사용하여 기기마다 다 맞춰주는 것은 현실적으로 힘든 일입니다. 그래서 여러 style library들은 이런 일을 단순화 해줍니다.

Bootstrap의 경우에는 Grid System으로 tailwindcss의 경우에는 나름의 Responsive Design 방식으로 이러한 문제를 해결하고 있습니다.

Bootstrap의 Grid System을 간단히 설명하자면, 5가지의 정해놓은 크기 기준 별로 width를 12개로 쪼갠 구간을 얼마나 배정할지를 정하는 것입니다. 예를 들어 sm 사이즈에서는 해당 element가 6/12를 차지하게 하지만, lg 사이즈에서는 해당 element가 3/12를 차지하게 하는 식으로 크기를 조정하는 것입니다.

tailwindcss의 경우에도 크기는 다르지만 5가지의 정해놓은 크기 기준으로 나눈다는 점에서는 같습니다. 단 Grid System과는 달리 각각의 크기 기준 별로 css 값을 달리 줍니다. Bootstrap에 비해서는 상대적으로 복잡한 방식이지만, 커스터마이징을 더 세부적으로 할 수 있다는 장점이 있습니다.