(2) Todolist 작업 전 반응 형 웹&앱 설정

이전 시간에 사전 준비 작업 과정에서 React 설치하는 법을 먼저 진행하시기 바랍니다.

(1) 시작하기 전 : https://berkley.tistory.com/5

(1) 시작하기 전

 

 

1. 반응형 웹의 기본 알아보기

먼저 todolist의 웹모드, 앱모드의 반응형 웹&앱으로 기초를 알아본다.

작업 전, 반응형 웹&앱 작동이 되어있는지 테스트 합니다.

 

2. 반응형 웹&앱 테스트

==>  600px, 1200px, 1200px초과시 각각 배경 색상별로 알아봅니다.

 

1) 먼저, App.js를 아래와 같이 작성합니다. 

 function  App() {

  return (

    <div className="container">

      <div>반응형 웹 테스트</div>

    </div>

  );

}

 

2) 다음은 1200px 초과시, 1200px, 600px 이하일 경우 App.css에 아래와 같이 색상별로 지정해봅니다.

이때, 넓이가 가장 넓은 컴포넌트부터 배치하고, 낲은 컴포넌트 순으로 조정해야합니다.

/* 반응형 웹 설정 */



/* 1200px 초과시 */
@media (min-width:1200px) {
    .container {
      background-color: green;
    }
}


/* 1200px 이하 일 경우 */
@media (max-width:1200px) {
  .container {
    background-color: yellow;
  }
}


/* 600px 이하일 경우 */
@media (max-width:600px) {
  .container {
    background-color: red;
  }
}

 

 

 

3) 아래와 같이 결과를 표시합니다.

 

- 1200px 초과일 경우 : 녹색 배경 출력

1200px 초과 : 녹색

- 1200px 미만일 경우 : 노란색 배경 출력

 

- 600px 미만일 경우 : 빨간색 배경 출력

 

 

 

 

다음 시간은 1200px, 600px 기준별로 Todolist UI 설정 하는 병법의 대해 진행하도록 하겠습니다.

(3) 반응형 Todolist UI 작업 진행 :   https://berkley.tistory.com/7

(3) 반응형 Todolist UI 작업 진행