반응형 추가작업

작업하고 있는 사이트에서 개발자도구를 연다. 

 

컴포넌트를 선택한다. 눈모양을 선택하면 다음 해당하는 DOM요소로 이동한다. 

styles 부분으로 이동해서 코드상에서 변경하기전에 media query일 때는 flex-direction을 column으로 변경을 해줘본다.

대략적으로 확인한 다음에 계획하고 검증단계를 거친 후에 코드로 작성한다. app.module.css에서 코드를 아래와 같이 작성한다. max width를 보통 780으로 잡는 780을 16으로 나누면 48rem이다.(왜 16으로 나누는지 고민)

미디어쿼리일때는 content를 이미 display가 flex로 되어 있으니까 flex-direction을 column으로 주면 된다.

@media screen and (max-width: 48rem) {
  .content {
    flex-direction: column;
  }
}

 

 

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)