패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 리워즈를 넣으면서 배운 "버튼그룹", "버튼"과 관련된 부분을 알아보자

HTML

• 회원가입 버튼만 btn class에 btn--reverse를 줌으로써 상태를 반전으로 만들었다
• btn-group으로 묶어서 그 안에 버튼 3개를 넣음

    <!-- REWARDS -->
    <section class="rewards">
      <div class="bg-left"></div>
      <div class="bg-right"></div>
      <div class="inner">

        <div class="btn-group">
          <div class="btn btn--reverse sign-up">회원가입</div>
          <div class="btn sign-in">로그인</div>
          <div class="btn gift">e-Gift 선물하기</div>
        </div>
      
      </div>
    </section>

CSS

• .rewards .btn-group의 위치상 부모는 전역속성인 .inner이다
• "e-Gift 선물하기" 버튼은 길게 만들기 위해서 .rewards .btn-group .btn.gift에 flex-grow: 1;을 주었음 > display flex-container 내부에서 최대한의 너비를 쓸 수 있도록 늘어나라는 의미이다

/* REWARDS */

.rewards{
    position: relative;
}

.rewards .bg-left{
    width: 50%;
    height: 100%;
    background-color: #272727;
    position: absolute;
    top: 0;
    left: 0;
}

.rewards .bg-right{
    width: 50%;
    height: 100%;
    background-color: #d5c798;
    position: absolute;
    top: 0;
    right: 0;
}


.rewards .inner {
    background-image: url("../images/rewards.jpg");
    height: 241px;
}


.rewards .btn-group {
   position: absolute;
   bottom: 24px;
   right: 0;
    width: 250px;
    display: flex;
    flex-wrap: wrap;
}


.rewards .btn-group .btn.sign-up {
    margin-right: 10px;
}

.rewards .btn-group .btn.sign-in {
    width: 110px;
}

.rewards .btn-group .btn.gift {
    margin-top: 10px;
    flex-grow: 1;
}