Project. 반응형 페이지 - (7) Footer Section

(7) Footer Section

 

📌 HTML + CSS 작성

 

- html 마크업 구성

 

매우 간단!

col-12 짜리 세개만들기.

 

 

index.html

<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <ul class="footer-links">
          <li><a href="#" class="footer-link">Terms</a></li>
          <li><a href="#" class="footer-link">Privacy</a></li>
          <li><a href="#" class="footer-link">License</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

 

 

style.css

/* Footer Page */
.footer {
  padding: 24px 0;
}

.footer-link {
  margin-bottom: 8px;
}

.footer-link:last-child {
  margin-bottom: 0;
}

.footer-link a {
  font-size: 14px;
  line-height: 1.71428571;
  letter-spacing: -0.01em;
  color: #807f81;
}

 

+)  media query  (Desktop)

/* footer */

  .footer-links {
    display: flex;
    align-items: center;
  }

  .footer-link {
    margin-bottom: 0;
    margin-right: 16px;
  }

desktop일때

mobile일때

 

 

 

 

 

 

 

드디어 모든 페이지 완성.

다음 포스팅에서 코드 리뷰 + 복습 진행함.

수고했어용 👍

 

 

 

---

🔻 Design File

Figma

 

🔻Reference Lecture

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