Project. 반응형 페이지 - (5) Curriculum Section

(5) Curriculum Section

 

 

📌 HTML + CSS 작성

 

- html 마크업 구성

desktop에서는 이미지가 등장함.

 

row는 두줄로,

col-12(col-md-6) 두개씩 구성함.

 

<section class="curriculum section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6">
        <strong class="section-category">Curriculum</strong>
        <h1 class="section-title">Dive into the web development</h1>
        <p class="section-desc">
          Dive into the software development <br />
          environment and the basics of computing, networks, and data
          structures.
        </p>
        <a href="#" class="fill-button">Apply now</a>
      </div>
      <div class="col-12 col-md-6">
        <div class="curriculum-image">
          <img src="./assets/img-curriculum.png" alt="Curriculum" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6">
        <p class="curriculum-detail-desc">
          <strong>Real-World Projects.</strong> Solve challenges that
          professional engineers face as you work individually and in teams
          with designers.
        </p>
      </div>
      <div class="col-12 col-md-6">
        <p class="curriculum-detail-desc">
          <strong>Instructor Support.</strong> Get guidance, feedback, and
          more during scheduled one-on-one check-ins.
        </p>
      </div>
    </div>
  </div>
</section>

 

- 스타일 적용은?

이전에 program 만들 때 모듈을 만들어뒀기 때문에 그대로 클래스만 적용하면 된다.

 

 

style.css

/* Curriculum Page */

.curriculum .section-category {
  color: #0189d1;
}

.curriculum-image {
  display: none;
}

.curriculum-detail-desc {
  font-size: 15px;
  line-height: 1.466666667;
  color: #2b292d;
  letter-spacing: -0.01em;
}

.curriculum .section-desc {
  margin-bottom: 32px;
}

.curriculum .row:first-child {
  margin-bottom: 48px;
}

.curriculum .row:last-child .col-12:first-child {
  margin-bottom: 40px;
}

+) 미디어쿼리 부분 (desktop)

/* >= 768px (Desktop) */

@media screen and (min-width: 768px) {

			/* 🔺 생략 */

 	/* Curriculum */

  .curriculum .row:first-child {
    margin-bottom: 24px;
  }

  .curriculum .row:last-child .col-12:first-child {
    margin-bottom: 0;
  }

  .curriculum .section-desc {
    margin-bottom: 72px;
  }

  .curriculum-detail-desc {
    font-size: 18px;
    line-height: 1.44444444;
  }

  .curriculum-image {
    display: block;
  }

  .curriculum-image img {
    display: block;
    width: 100%;
    max-width: 425px;
    height: auto;
  }
}

 

mobile에서는 display: none으로

div>img 자체를 숨겨버리고,

 

desktop에서는 (미디어쿼리) display: block으로 div가 보이게 한 후,

img의 width*height 를 조정해준다.

 

** 여기서 max-width는

처음엔 width: 100% 로 가다가 어느순간 커지면 425px을 안 넘도록 해주는 것.

 

 

 

드디어 다 잘 적용된다!

 

 

 

 

 

 

+) 사담

 

자꾸 이상한 부분에서 실수를 해서 시간을 많이 날렸다 😥

다음부턴 이런일 있어도 당황하지말자. 슬퍼하지말자.

 

 

---

🔻 Design File

Figma

 

🔻Reference Lecture

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