이번엔 모바일 기기에서 보여질 화면을 처리해야하는데요!

우리 카드 페이지에서 우클릭→검사버튼을 누르시고

빨간색으로 표시한 버튼을 누르시면 위와같이 반응형 화면을 확인할 수 있어요!

크기 드롭다운바에서 반응형, 갤럭시, 아이폰, 아이패드 등등의 다양한 모바일 기기를 선택한후에 그 기기에서 어떻게 보여질지 확인해 볼 수 있답니다.

<aside> 📌 튜터님 팁! 기기마다 조금씩 크기가 다르지만 365 X 645 정도로 맞춰놓으면 웬만한 기기를 커버할수 있다고 하네요! 나중에 모바일 버전 화면을 처리할때 팁이 될거같네요!

</aside>

@media screen and (max-width: 760px) {
      .envelope {
        margin: 150px auto 0 auto;
      }

      .msgBox {
        width: 300px;
        padding: 20px;
      }

      .rtan {
        width: 150px;
        height: 150px;
        margin: 70px auto 0px auto;
      }

      h1 {
        font-size: 1.5em;
      }
    }

.letter {display:none};을 지우고 .letter-open {display:none};을 한채로 봉투일때의 화면을 수정했어요!

.letter {display:none};으로 해놓고 화면을 수정했어요!

코드 작성후 적용된 화면까지 확인해보았는데요!

가로 길이가 760 이하로 작아질때는 @media screen~부분에 작성해놓은 css로 적용된다는 것을 배워 간단한 모바일 화면 처리를 하였네요!