저번 강의에서는 르탄이 이미지를 넣고 box-shadow를 이용해 예쁘게 꾸며보았는데요!

l.PNG

이번에는 본격적으로 편지 제목과 내용을 만들어봅시다!

<body>
  <div class="letter">
    <div class="envelope"></div>
    <h2 class="msg">내 마음이 담긴 봉투야!👆</h2>
  </div>
  <div class="rtan"></div>
  <h1>🤍미리 메리 크리스마스🤍</h1>
</body>

편지 제목을 넣기 위해 h1태그를 사용했습니다!

이 제목을 꾸미기 위해서

h1 {
      color: white;
      text-align: center;
    }

위와 같은 css코드를 작성해주었는데요!

혹시 h1태그를 여러개 사용하시고 그 h1태그마다 다른 스타일을 적용해주실거라면 class를 작성해주는게 좋겠지요?

지금 우리가 만드는 카드에서는 h1태그가 한번 사용되기때문에 따로 class를 부여하지 않고 h1태그를 지칭하여 css를 작성하였습니다!

그리고 흰 편지 속 내용도 작성해줘야겠죠!

<body>
  <div class="letter">
    <div class="envelope"></div>
    <h2 class="msg">내 마음이 담긴 봉투야!👆</h2>
  </div>
 <div class="rtan"></div>
    <h1>🤍미리 메리 크리스마스🤍</h1>
    <div class="msgBox">
      친구들에게. <br />
      올해 이런저런 일이 많았는데 <br />
      너희 덕분에 하나도 힘들지 않았어 <br />
      내년에도 우리 우정 변치말자 <br />
      연말에 다 같이 못 봐서 아쉽다 <br />
      <p class="from">2020.11.26 다오니가</p>
    </div>
</body>

편지는 위와같이 msgBox div안에 작성해줍니다!

편지 내용은 좌측으로 (저는 가운데 정렬이 더 예뻐보여서 center로 정렬했어요!), from부분은 우측 정렬해줄거니까 from부분은 따로 p태그로 작성했습니다! 이제 이 내용을 꾸며줘야겠죠!

.msgBox {
      background-color: ivory;
      width: 400px;
      margin: auto;
      color: brown;
      padding: 30px;
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      box-shadow: 0px 0px 10px 0px white;
    }

    .from {
      text-align: right;
			margin-bottom: 0;
    }

여기서 line-height 개념은 처음 나왔네요!

<aside> 📌 line-height: 줄간격을 보기좋게 띄워주기 정도로 생각하시면 될거같아요! 너무 다닥다닥 붙어있는 글은 보기 어렵죠?! 튜터께서 line-height는 항상 폰트 크기보다 좀 더 큰게 보기좋다고 알려주시네요!

</aside>