# 2023년 이후의 반응형 디자인 가이드

> Clean Markdown view of GeekNews topic #8448. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=8448](https://news.hada.io/topic?id=8448)
- GeekNews Markdown: [https://news.hada.io/topic/8448.md](https://news.hada.io/topic/8448.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-02-10T10:46:01+09:00
- Updated: 2023-02-10T10:46:01+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/responsive-design/)
- Points: 27
- Comments: 1

## Topic Body

- Responsive Design 소개   
  - 최신 CSS 사용  
  - 미디어 쿼리 사용   
- 몇년간의 반응형 디자인   
  - 부트스트랩, 미디어쿼리, Fixed-Width   
- 반응형 디자인과 지루한 웹사이트   
- 웹은 기본적으로 반응형   
- 2023년 이후의 반응형 디자인  
  - 콘텐츠 길이에 반응  
  - 뷰포트에 반응   
  - 컨테이너에 반응   
  - 사용자 설정에 반응   
- 반응형 웹사이트 구축의 핵심은 웹사이트를 유동적(fluid)으로 만드는 것   
- 반응형 레이아웃을 구축하는 최신 방법   
  - CSS Flexbox   
  - CSS Grid Layout   
  - Fluid Sizing   
  - Size Container Queries   
  - Style Container Queries   
  - User preference Media Queries   
  - Logical Properties  
  - Defensive CSS   
- 결론

## Comments



### Comment 14702

- Author: alstjr7375
- Created: 2023-02-10T17:09:48+09:00
- Points: 1

Fluid Sizing의 경우 몇년전에 비쥬얼 앵글을 기반으로 만들어본적이 있습니다.  
https://github.com/black7375/fluid-size/wiki/The-theory-of-font-size-and-readability