반응형 홈페이지 만들기 - 007

**[공지사항]** [개인적인 공부를 위한 내용입니다. 오류가 있을 수 있습니다.]

[반응형 홈페이지 만들기-007]

footer 만들기

index.html을 아래와 같이 작성한다.

<footer>
  <div class="inner">
    <div class="footer-message">진실로 새로워지기 위해서는, 날마다 새로워야 하고 또 새로워야 한다.[일신우일신(日新又日新)]</div>
    <div class="footer-contact">gmkim71@gmail.com</div>
    <div class="footer-copyright">Copyright 2022 © All rights reserved.</div>
  </div>
</footer>

style.css는 아래와 같이 작성한다.

footer {
  border-top: 1px solid #e4e4e4; /* 위쪽 선 만들기 */
  background-color: #f8f9fa;
  padding: 1rem 0;
  margin: 1rem 0;
}

.footer-message {
  font-weight: bold;
  color: #545e6f;
  margin: 1rem 0.5rem;
}

.footer-contact {
  color: #545e6f;
  margin: 0 0.5rem;
}

.footer-copyright {
  color: #545e6f;
  margin: 1rem 0.5rem;
}

위의 내용을 모두 적용하여 실행하면 아래와 같은 화면이 나온다.