6. 기초 스타일링(2)

스타일링 기본 골자를 갖췄으니 header와 footer 스타일링을 진행한다.

base.css에 스타일을 작성한다.

 

태그 안에 class를 통해 스타일링을 진행할 예정이다. class로 스타일링 할때는 '.'을 이용해 작성하고 스타일은 {}로 감싼다.

 

<base.css>

.pinterest_logo {
    font-family: 'Anton', sans-serif;
    text-align: center;
}
.pinterest_header_btn {
    text-align: center;
}
.pinterest_footer_btn {
    text-align: center;
    font-size: .7rem;
}

 

<header.html>

<div style="margin:2rem 0">
  <div class="pinterest_logo mb-3">
    <h2>Pinterest Clone</h2>
  </div>
  <div class="pinterest_header_btn">
    <span>nav1</span> |
    <span>nav2</span> |
    <span>nav3</span> |
    <span>nav4</span> |
    <span>nav5</span> |
  </div>
</div>

 

<footer.html>

<div>
  <div class="pinterest_footer_btn">
    <span>공지사항</span> |
    <span>제휴문의</span> |
    <span>서비스소개</span> |
  </div>
  <div class="pinterest_logo mt-3">
    <h5>Pinterest Clone</h5>
  </div>
</div>

 

<css 적용 화면>