“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
푸터 유형
페이지에서 푸터 유형은 맨 밑 하단에 위치해 있으며 정보 및 연락처가 나와 있거나 사이트 링크 섹션, 소셜미디어 섹션,구독섹션,저작권섹션,이전/다음페이지 링크 섹션,페이지 맨위로 링크등이 제공됩니다.
pigma
pigma
- 피그마를 사용하여 그리드를 이용해서 전체적인 틀을 잡아줍니다.
HTML
<body>
<footer class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h3>Festival Ticket</h3>
<ul>
<li><a href="#">티켓예매</a></li>
<li><a href="#">티켓예약</a></li>
<li><a href="#">티켓 유의사항</a></li>
<li><a href="#">현장 발권</a></li>
</ul>
</div>
<div>
<h3>Festival News</h3>
<ul>
<li><a href="#">DJ 인터뷰</a></li>
<li><a href="#">NEW MUSIC</a></li>
<li><a href="#">메거진</a></li>
<li><a href="#">DJ V LIVE</a></li>
</ul>
</div>
<div>
<h3>Festival Music</h3>
<ul>
<li><a href="#">음원 예약하기</a></li>
<li><a href="#"> 음원 구매하기</a></li>
<li><a href="#">음악 듣기</a></li>
<li><a href="#">음원 및 저작권</a></li>
</ul>
</div>
<div>
<h3>Festival F.lab</h3>
<ul>
<li><a href="#">F.lab 소개</a></li>
<li><a href="#"> 페스티벌 즐기는 법</a></li>
<li><a href="#"> F.lab 신청하기</a></li>
<li><a href="#">F.lab 사람들</a></li>
</ul>
</div>
<div>
<h3>Festival world</h3>
<ul>
<li><a href="#">페스티벌 종류</a></li>
<li><a href="#"> 세계 음악 역사</a></li>
<li><a href="#">페스티벌 역사</a></li>
<li><a href="#">떠나자 Festival</a></li>
</ul>
</div>
<div>
<h3>Festival 주의사항 </h3>
<ul>
<li><a href="#">주의사항</a></li>
<li><a href="#">유의사항</a></li>
<li><a href="#">에티켓</a></li>
<li><a href="#">모두가 즐기기 위한</a></li>
</ul>
</div>
</div>
<div>
<address class="footer__right">
2023 youna의 Festival 사이트 F.lab<br>Enjoy Festival
</address>
</div>
</div>
</footer>
</body>pigma
HTML
- footer 에 class footer__wrap을 설정 해 줍니다. 그리고 그 안에 들어갈 section과 폰트체를 써줍니다.
- footer__inner를 만들어 주고 그 안에 footer__menu를 설정합니다.
- menu안에 div박스 6개를 만들어서 footer안에 들어갈 제목과 내용을 6가지로 써주는데 내용은 하나하나 정렬 시키기 위해 ul,li태그를 써줍니다.
- 마지막 맨 밑에는 간략한 사이트 소개가 들어갈거기 때문에 address를 사용해서 footer__right를 써 준 후 사이트를 써줍니다.
CSS
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
li {
list-style: none;
}
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* common */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0,0,0,0.1); */
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: rgba(237, 41, 176, 0.69);
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
color: #666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* footer__wrap */
.footer__menu {
display: flex;
}
.footer__menu > div {
width: 16.666%;
}
.footer__menu > div h3 {
margin-bottom: 13px;
}
.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;
}
</style>CSS
- 저번 사이트 wrap부분 전까지 복사해서 가져와서 footer__wrap이라고 지정해 줍니다.
- footer__menu에 display-flex를 부여해 줍니다.
- 또한 footer__menu에 들어갈 div width값을 16.666%를 줍니다.
- 그리고 div h3와 li에 들어갈 속성을 부여해줍니다.
- right에는 선이 들어가는데 border-top 1px과 solid와 색상을 부여해서 선을 만들어 줍니다.
❥코딩으로 완성된 푸터
✏️다시한번 정리하는 속성
| margin-top | 상단 여백 |
| border-top | 테두리 상단 (두께,모양,색상) 일괄 지정 단축 |
| line-height | 줄 높이 지정 |
| adress | 회사와 연락할 수 잇는 정보를 명시할 때 사용 |