이번 강의에서는 위에 보여지는것 처럼 편지를 만들어요!

위에 보이는 편지를 만들기 위해서는 저번시간에 만들어두었던 봉투가 보이지 않아야 제작이 편하다고 말씀해주시네요!

그렇담! display: none;을 이용하면 된답니다!

• 전체 코드

<aside> 📌 <div class="letter"> <div class="envelope"></div> <h2 class="msg">내 마음이 담긴 봉투야!👆</h2> </div>

</aside>

먼저 envelope과 msg를 담고 있던 div 태그에 letter라는 클래스를 주었어요! 그 후에

<aside> 📌 .letter { display: none; }

</aside>

display: none;을 하면!

이렇게 화면상에서 보이지 않게 된답니다! 이상태로 편지 만들기를 진행하면 될거같죠?

우선

<div class="rtan"></div>

rtan이라는 클래스명을 가진 div를 만들어줍니다!

튜터님께서 강의마다 굉장히 강조하시는 내용이 있는데요!

div를 만들고 그 div에 css 작업을 할때 background-color를 임의로 설정하여 이 div가 얼마만큼의 영역을 차지하고 있는지 눈으로 직접 확인하며 작업하라고 하시네요!!

.rtan {
      background-color: white;
      width: 200px;
      height: 200px;
      background-image: url("<https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/xmas/rtan.gif>");
      background-position: center;
      background-size: cover;
      margin: 100px auto 0 auto;
      border-radius: 50%;
      border: 5px solid white;
      box-shadow: 0px 0px 10px 0px white;
    }

<aside> 📌 box-shadow 사용법

box-shadow는 1일차에서 배우지 못했던 내용이라 따로 정리해보려고 합니다!

box-shadow: 0px 0px 10px 0px white;

                   1     2      3      4      5

1,2: 가로로 밑으로 얼마나 그림자가 치우칠 건지

3: 얼마나 뿌옇게 할 것인가

4: 얼마나 길게 뿌옇게 할 것인가

5: 색상

</aside>

결과 화면입니다!