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

지난 시간 

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

(1) 시작하기 전

 

 (2) Todolist 작업 전 반응 형 웹&앱 설정 : https://berkley.tistory.com/6

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

 

여기 까지 오셨으면 React와 반응형 웹&앱의 대해서 알아가는 시간이 되었습니다.

 

다음은 To-do List를 각각 1200px, 600px 별로 UI를 다르게 진행 하도록 하겠습니다.

 

 

1. 라이브러리 설치

- reactstrap, fontawesome, styled-components, react-bootstrap-icons 를 아래와 같이 명령어를 입력하여 설치합니다.

 

 

 

2. 각 1200px, 600px 기준 아래와 같이 UI를 작성합니다.

(1) 1200px 초과시

 

 

(2) 600px ~ 1200px 

 

(3) 600px 미만시

 

 

3. App.js에서 다음과 같이 공통적으로 코드를 작성 할 수 있습니다.

<div className="my-2 background-container">

      <Card className="my-2 container">
        <CardHeader className="header-container">
          To-do list 반응형 웹 개발
        </CardHeader>
        <CardBody>
          <CardTitle tag="h2">To-do list</CardTitle>
          <i class="bi bi-file-earmark-plus"></i>
          <div className="todo">
            <div className="todoContainer">
              <div className="todoTitle">
                Redux 학습하기 <PlusCircle />
              </div>


              <div className="todoContents">
                - 로그인/로그아웃 가능 여부 확인 <Trash3 />
              </div>
            </div>
            <div className="todoContainer">
              <div className="todoTitle">
                Redux 학습하기 <PlusCircle />
              </div>


              <div className="todoContents">
                - 로그인/로그아웃 가능 여부 확인 <Trash3 />
              </div>
            </div>{" "}
            <div className="todoContainer">
              <div className="todoTitle">
                Redux 학습하기 <PlusCircle />
              </div>


              <div className="todoContents">
                - 로그인/로그아웃 가능 여부 확인 <Trash3 />
              </div>
            </div>{" "}
            <div className="todoContainer">
              <div className="todoTitle">
                Redux 학습하기 <PlusCircle />
              </div>


              <div className="todoContents">
                - 로그인/로그아웃 가능 여부 확인 <Trash3 />
              </div>
            </div>
          </div>


          <Form className="addGroup">
            <Input className="addInput" />
            <Button className="addButton">추가</Button>
          </Form>
        </CardBody>
      </Card>
    </div>

 

 

이 경우, 웹 혹은 앱에서 기본적인 틀에서 각각 웹&앱 환경일 경우 CSS를 변동하여 각 환경 마다 다르게 표현 가능

 

 

 

4. 1200px 초과, 600~1200px, 600px일 경우 css 관련 코드

(1) 1200px 초과

@media (min-width:1200px) {

  .background-container {
    margin:5% 0 0 0
  }
  .container {
    background-color: green;
    margin : 0 auto;
    text-align: center;
    max-width:1200px;
    vertical-align: center;
  }
 
  .header-container{
    color: white;
    font-size: 10vh;
    font-weight:bold;
  }


  .todo {
    display:flex;
    flex-wrap: wrap;
    vertical-align: center;
  }
  .todoContainer {
    min-width:48%;
    padding: 5px;
  }


  .todoTitle {
    font-size:4vh;
    padding-left:10px;
  }


  .todoContents {
    font-size:3vh;
    padding-left:15px;
    padding-bottom:20px;
    text-align: left;
  }


  .addGroup {
    height: 35px;
    padding-top: 50px;
    padding-bottom: 50px;
    vertical-align: auto;
  }


  .addInput {
    width:50%;
    height:100%;
  }
  .addButton {
    width:10%;
    height:100%;
  }
}

 

(2) 600px ~ 1200px

@media (max-width:1200px) {

  .background-container {
    margin:2% 0 0 0
  }
  .container {
    background-color: yellow;
    margin : 0 auto;
    text-align: center;
    max-width:960px;
    vertical-align: center;
  }


  .header-container {
    color: red;
    font-size: 7vh;
    font-weight:bold;
  }


  .todoContainer {
    min-width:100%;
    padding: 1% 5% 1% 5%;
    display: flex;
    vertical-align: center;
  }


  .todoTitle {
    flex: 0 0 auto;
    width:auto;
    font-size:4vh;
    padding-left:10px;
  }
 
  .todoContents {
    flex: 0 0 auto;
    width:auto;
    font-size:3vh;
    padding-left:15px;
  }


  .addGroup {
    height: 35px;
    padding-top: 50px;
    padding-bottom: 50px;
    vertical-align: auto;
  }


  .addInput {
    width:50%;
    height:100%;
  }
  .addButton {
    width:10%;
    height:100%;
  }
}

 

 

(3) 600px 미만

@media (max-width:600px) {

  .background-container {
    margin:0;
  }


  .container {
    background-color: red;
    margin : 0 auto;
    text-align: center;
    vertical-align: center;
  }


  .header-container {
    color:blue;
    font-size: 5vh;
    font-weight:bold;
  }


  .todo {
    display:flex;
    flex-wrap: wrap;
    vertical-align: center;
  }
  .todoContainer {
    width:100%;
    padding: 5px;
    display:flex;
    flex-wrap: wrap;
  }


  .todoTitle {
    width:100%;
    font-size:4vh;
    padding-left:10px;
  }


  .todoContents {
    width:auto;
    padding-bottom:20px;
    font-size:3vh;
    padding-left:20px;
  }


  .addGroup {
    height: 35px;
    padding-top: 50px;
    padding-bottom: 50px;
    vertical-align: auto;
  }


  .addGroup {
    height: 35px;
    padding-top: 50px;
    padding-bottom: 50px;
    vertical-align: auto;
  }


  .addInput {
    width:50%;
    height:100%;
  }
  .addButton {
    width:10%;
    height:100%;
  }
}

 

 

이 경우, 각각 웹&앱을 활용하실때는 각각 css를 조정해주시면 원하는 반응형 웹&앱을 개발 가능합니다.

 

 

다음 시간에는 Todolist에서 CRUD의 기능을 가진 기능 중 

읽기, 쓰기 부분에 대해서 넘어가겠습니다.

 

(4) TodoList 기본 기능 CRUD 추가 - 1 (읽기, 쓰기) : https://berkley.tistory.com/8

(4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기)