Project. 반응형 페이지 - (4) Program Section ②

(4) Program Section

 

📌 HTML + CSS 작성

 

- html 마크업 구성

 

지난 포스팅에서 만든 strong+h1+p 구성이 한개의 row였다면

새로운 row를 만들어주고,

col-12를 총 3개 만들어 col-md-4 로 지정해준다.

 

<div class="row">
     <div class="col-12 col-md-4"></div>
     <div class="col-12 col-md-4"></div>
     <div class="col-12 col-md-4"></div>
</div>

<div class="row">
     <div class="col-12 col-md-4"></div>
     <div class="col-12 col-md-4"></div>
     <div class="col-12 col-md-4"></div>
</div>

 

지금까지 section.program 의 구성을 살펴보면 다음과 같다.

 

section > container > row > col-12 (col-md-10)

                            > row > col-12 (col-md-4) * 3

 

이런식으로 구성

 

 

index.html

<div class="row">
  <div class="col-12 col-md-4">
    <a href="#" class="program-card">
      <img src="./assets/img-fulltime-campus.png" alt="" />
      <strong>Full-Time On Campus</strong>
    </a>
  </div>
  <div class="col-12 col-md-4">
    <a href="#" class="program-card">
      <img src="./assets/img-fulltime-remote.png" alt="" />
      <strong>Full-Time Remote</strong>
    </a>
  </div>
  <div class="col-12 col-md-4">
    <a href="#" class="program-card">
      <img src="./assets/img-parttime-flex.png" alt="" />
      <strong>Part-Time Flex</strong>
    </a>
  </div>
</div>

 

style.css

/* Program Page */

.program-card {
  display: block;
  text-align: center;
  width: 290px;
  padding: 24px 0 32px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05),
    inset 0px 1px 0px rgba(255, 255, 255, 0.1);
}

.program-card img {
  display: block;
  width: auto;
  height: 195px;
  margin: 0 auto 16px;
}

.program-card strong {
  font-size: 18px;
  line-height: 1.33333333;
  letter-spacing: -0.02em;
}

 

여기서, program-card는 원래 a태그라서 display: block이든 flex든 해줘야함. (border-radius나 width 설정을 위해)

 

난 처음에 flex 하고 align-item: center. justify-content: center 해서 가운데 정렬 해줬지만

이번엔 display: block하고 text-align: center로 >> strong 가운데정렬

 

img는 우리가 height 설정을 위해 display: block으로 바뀌었기 때문에, margin: 0 auto를 준다.

(block 가운데정렬시 이렇게 함.)

 

 

 

 

 

+) hover 스타일 적용

.program-card:hover {
  background-color: #3141c5;
  box-shadow: 0px 13px 18px rgba(0, 0, 0, 0.15),
    0px 11px 55px rgba(0, 0, 0, 0.07);
}

.program-card:hover strong {
  color: #fff;
}

.program-card {
/* 생략 */
  transition: background-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

 

 

🔻 program page 전체 CSS

/* Program Page */

.program .row:first-child {
  margin-bottom: 32px;
}

.program .col-md-4 {
  margin-bottom: 20px;
}

.program .col-md-4:last-child {
  margin-bottom: 0;
}

.program .section-category {
  color: #009b4d;
}

.program-card {
  display: block;
  width: 290px;
  padding: 24px 0 32px;
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.05),
    inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  transition: background-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

.program-card:hover {
  background-color: #3141c5;
  box-shadow: 0px 13px 18px rgba(0, 0, 0, 0.15),
    0px 11px 55px rgba(0, 0, 0, 0.07);
}

.program-card:hover strong {
  color: #fff;
}

.program-card img {
  display: block;
  width: auto;
  height: 195px;
  margin: 0 auto 16px;
}

.program-card strong {
  font-size: 18px;
  line-height: 1.33333333;
  letter-spacing: -0.02em;
  transition: color 500ms ease-in-out;
}

+ 미디어쿼리 (desktop 부분)

/* >= 768px (Desktop) */

@media screen and (min-width: 768px) {
	/* 🔺 생략 */
    
 /* Program */

  .program {
    text-align: center;
  }

  .program .row:first-child {
    margin-bottom: 72px;
  }

  .program-card img {
    margin-bottom: 24px;
  }

  .program-card strong {
    font-size: 20px;
    line-height: 1.2;
  }
}

 

 

+)

강의에선 안했지만, 나는

.program-card에 width: 100%를 추가했다.

 

 

---

🔻 Design File

Figma

 

🔻Reference Lecture

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