Project. 반응형 페이지 - (6) Subscription Section

(6) Subscription Section

 

📌 HTML + CSS 작성

 

- html 마크업 구성

 

 

이번에는 section 말고 aside로 감싸주자.

디자인시안을 보면, image부분과 나머지 title+p+form 부분으로 나눠지고,

col-12(col-md-5)와

col-12(col-md-7)로 나눈다.

 

row를 나누는 기준은 ??? - 줄바꿈 하면 row 따로 적기.

이번엔 같은줄에 있으므로 row>col+col

 

 

 

index.html

<aside class="subscription">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-5">
        <div class="subscription-image">
          <img src="./assets/img-banner.png" alt="Subscribe us" />
        </div>
      </div>
      <div class="col-12 col-md-7">
        <h1 class="subscription-title">Stay with us</h1>
        <p class="subscription-desc">
          Subscribe to our email newsletter to stay up to date on the latest
          updates
        </p>
        <form action="#" method="POST" class="subscription-form">
          <div class="input-group">
            <input type="email" placeholder="Enter your email" />
            <button type="submit" class="fill-button">Get started</button>
          </div>
          <p class="form-notice">
            Cancel any time. Check out <a href="#">Terms of Use.</a>
          </p>
        </form>
      </div>
    </div>
  </div>
</aside>

나중에 input을 가로정렬 해주기 위해 .input-group div로 감싸준다.

(display: flex 쓸 예정!)

 

 

🔻 내가 작성해본 코드

 

style.css

/* Subscription */

.subscription {
  background-color: #f2f8fa;
  text-align: center;
  padding: 40px 0;
}

.subscription-image {
  padding: 25px;
  margin-bottom: 16px;
}

.subscription-image img {
  display: block;
  width: auto;
  height: 190px;
  margin: 0 auto;
}

.subscription-title {
  margin-bottom: 16px;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #2b292d;
}

.subscription-desc {
  margin-bottom: 24px;
}

.subscription .input-group {
  margin-bottom: 8px;
}

.subscription .input-group input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 2px;
  margin-bottom: 8px;
  color: #7b7b7e;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.subscription .input-group .fill-button {
  width: 100%;
  cursor: pointer;
}

.subscription-form .form-notice {
  font-size: 13px;
  line-height: 1.5384615;
  letter-spacing: 0;
  color: #7b7b7e;
}

.subscription-form .form-notice a {
  cursor: pointer;
  text-decoration: underline;
  color: #3040c4;
}

 

이제 desktop 버전의 스타일을 적용해보자. (미디어쿼리)

input group에 flex를 주자.

 

/* 🔺 생략 - 미디어쿼리 */

/* Subscription */

  .subscription {
    text-align: left;
    padding: 80px 0;
  }

  .subscription-image {
    padding: 8px 0;
  }

  .subscription-image img {
    height: 285px;
    margin-left: 0;
  }

  .subscription-title {
    font-size: 40px;
  }

  .subscription .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
  }

  .subscription .input-group input {
    height: 56px;
    font-size: 18px;
    line-height: 1.3333333;
    margin-bottom: 0;
    margin-right: 8px;
  }

  .subscription .input-group .fill-button {
    flex-shrink: 0;
    width: 160px;
  }

  .subscription-form .form-notice {
    font-size: 14px;
    line-height: 1.7142857143;
  }

 

 

 

💡 flex-shrink

 

 

지난번 실습때 배운 flex-grow의 반대개념.

flex-grow의 경우엔

container (width: 600px)
item1 (width: 200px)	item2 (width: 200px)	남는공간

이런 경우에 item2에게 flex-grow: 1을 주면?

 

container (width: 600px)
item1 (width: 200px)	item2 (width: 400px)

이런식으로 남는공간까지 쭉 자라게 된다.

 

 

반대로, flex-shrink는 무엇일까?

우리가 flex-wrap 속성을 default로 놔두면 no-wrap이다.

no-wrap은 무슨일이 있어도 한줄로 나타내는 것 이므로

필요에 의해서는 안에 아이템들의 크기를 줄여버린다.

 

container (width: 600px)
item1 (width: 200px)	item2 (width: 500px) >> 100px 줄어듬

이때, flex-shrink: 0을 준다면?

item2에 flex-shrink: 0을 주면 item2는 설정한 width를 반드시 유지한다. (나머지 아이템이 줄어듬)

 

container (width: 600px)
item1 (width:100px)	item2 (width: 500px) >> 100px 줄어듬

 

  .subscription .input-group .fill-button {
    flex-shrink: 0;
    width: 160px;
  }

 

 

완성!

 

---

🔻 Design File

Figma

 

🔻Reference Lecture

김버그의 HTML&CSS는 재밌다 - 구름EDU