8. 웹 페이지 따라 만들기 <footer>

footer 태그를 만들어보자.

[HTML]

1. footer 태그 내용 채우기

항상 inner태그가 기본이 되어야 한다.

<footer>
  <div class="inner">
    <div class="footer-message">합리적인 분들과 좋은 컨텐츠가 지속될 수 있는 선순환 시스템을 지향합니다</div>
    <div class="footer-contact">컨택: dream@fun-coding.org</div>
    <div class="footer-copyright">Copyrigh 2020 All ⓒ rights reserved</div>
  </div>
</footer>

[CSS]

1. footer 태그에 CSS 적용하기

footer{
    border-top: 1px solid #e4e4e4;
    background-color:#f8f9fa;
    padding:1rem 0;
    margin:1rem 0;
}

.footer-message{
    font-weight: bold;
    font-size:0.9rem;
    color:#545e6f;
    margin-bottom:0.3rem;
    margin:0 0 0 0.6rem;
}
.footer-contact{
    font-size:0.9rem;
    color:#545e6f;
    margin:0.6rem;
}
.footer-copyright{
    font-size:0.9rem;
    color:#545e6f;
    margin:0.6rem;
}

footer 태그 바로 위의 줄을 만들기 위해 border-top 으로 설정해두었다.
margin과 padding설정은 알아서 잘 보고 하자.