Leeyanggoo
[CSS] UI/UX 푸터 유형 레이아웃 만들기!! 본문
읽기 전에 잠깐!
이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다!
푸터 유형 레이아웃이란?
푸터(footer)는 웹 페이지의 하단에 위치한 영역으로, 보통 사이트 내비게이션, 저작권 정보, 연락처 등과 같은 보조적인 정보를 담고 있습니다.
푸터 유형은 페이지마다 다양하게 제작할 수 있으며 일반적으로는 두 가지 유형이 있습니다.
1. Fixed Footer
고정 푸터는 웹 페이지의 하단에 고정되어 스크롤을 내려도 항상 화면에 보이는 유형입니다.
사용자가 어떤 곳을 보고 있든지 항상 접근할 수 있기 때문에 편리합니다.
하지만 콘텐츠가 많은 페이지의 경우 푸터가 중복되는 경우도 있기에 주의해야 합니다.
2. Sticky Footer
스티키 푸터는 페이지의 내용이 일정 이상의 높이보다 작을 때는 하단에 있지만, 페이지의 내용이 많아지면 스크롤되어 보이는 유형입니다.
이런 유형은 중복을 피하면서 나타나기 때문에 일반적으로 유용합니다.
🧐 <ul>, <li> 태그의 구획을 잘 나누자!
<footer class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h3>Infomation</h3>
<ul>
<li><a href="#">Websites</a></li>
<li><a href="#">Collections</a></li>
<li><a href="#">Contributors</a></li>
</ul>
</div>
<div>
<h3>Learn</h3>
<ul>
<li><a href="#">Academy</a></li>
<li><a href="#">Seminar</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</div>
<div>
<h3>Know-how</h3>
<ul>
<li><a href="#">Directory</a></li>
<li><a href="#">Conferences</a></li>
</ul>
</div>
<div>
<h3>Connect</h3>
<ul>
<li><a href="#">FAQs</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div>
<h3>Policy</h3>
<ul>
<li><a href="#">Cookies Policy</a></li>
<li><a href="#">Legal Terms</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div>
<h3>SNS</h3>
<ul>
<li><a href="#">Instargram</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2023 LeeYanggoo CIGAR site Portfolio is Power<br>
All Right Reserved
</div>
</div>
</div>
</footer>
/* footer__type */
.footer__wrap {
background-color: #F5F5F5;
}
.footer__menu {
display: flex;
}
.footer__menu > div {
width: 16.666%;
}
.footer__menu > div h3 {
margin-bottom: 16px;
font-size: 18px;
}
.footer__menu > div li {
line-height: 1.9;
font-size: 14px;
}
.footer__menu > div li a{
color: #666;
}
.footer__right{
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
text-align: center;
font-style: normal;
line-height: 1.6em;
color: #666;
font-size: 14px;
}
HTML 태그를 보면 <footer> 태그부터 시작하는 걸 볼 수 있습니다.
이전의 HTML 포스팅에서 말씀드렸듯이 우리는 웹 표준성을 위해 항상 시멘틱 태그를 사용해야 합니다!
부모 div 태그의 class "footer__menu" 아래 자식 요소의 div 속에 <ul>과 <li> 태그가 나뉘어 있는 걸 볼 수 있습니다.
따라서 우리는 CSS 속성으로 flex 속성을 줄 때, 부모 박스가 어떤 박스인지 유심히 살펴봐야 합니다.
구획을 나눌 때 페이지의 width를 얼마나 할당하는지 계산하고 그만큼의 %를 줘야 합니다.
예제는 6개의 구획을 가지기 때문에 약 16%로 계산했습니다.
마지막에 Copyright 상단에 있는 줄을 만들기 위해서 border-top을 추가했습니다.
따로 줄을 만들어서 추가하는 것보다 쉽게 구분선을 만들 수 있기 때문에 기억해두면 좋은 효과입니다!
