Skip to content

Responsive Web Design

React

1. 반응형 웹 디자인이란?

  • 모든 장치에서 잘 보이는 웹 페이지를 만드는 것
  • 다양한 화면 크기와 뷰포트에 맞게 자동으로 조정

2. 반응형 웹 디자인은 어떻게 설정할 수 있을까?

2-1. HTML의 경우

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2-2. React의 경우

# npm
npm i react-responsive
# yarn
yarn add react-responsive

2-3. Typescript의 경우

# npm
npm install @types/react-responsive
# yarn 
yarn add @types/react-responsive

3. Reference