728x90
반응형
Figma를 이용해 틀을 만들어 준후 작업을합니다.
우선 body부분에 html을 해주도록 합니다. 그후 style로 가서 만들어 주도록 합니다.
<body>
<footer class="footer__wrap nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div class="footer__text">
<h3>쿠키 사이트</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 class="footer__text">
<h3>쿠키 사이트</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 class="footer__text">
<h3>쿠키 같이 만들기</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 class="footer__text">
<h3>쿠키 주의점</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 class="footer__text">
<h3>쿠키의 종류</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 class="footer__text">
<h3>고객 문의</h3>
<ul>
<li><a href="#">1:1 문의</a></li>
<li><a href="#">자주 물어보는 질문</a></li>
<li><a href="#">광고 문의</a></li>
<li><a href="#">정보 수정 요청</a></li>
</ul>
</div>
</div>
<div class="footer__right">
<p>2023 쿠키관련 사이트 Portfolio is Power</p>
<p>All Right Reserved</p>
</div>
</div>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>푸터 유형01</title>
<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__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__text {
width: 16.6666%;
}
.footer__text h3 {
font-size: 18px;
margin-bottom: 13px;
}
.footer__text ul li a{
color: #666;
font-size: 14px;
line-height: 1.7;
}
.footer__right {
text-align: center;
font-size: 14px;
line-height: 1.7;
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
color: #666;
}
</style>/* footer__wrap */위에 있는 부분은 전에 올린 사이트 와 같이 써야 하므로 변경 하지 않고,밑 부부만 보도록 하겠습니다.
·footer__text 에 폭값을 주고 footer__menu에 display: flex;를 해주시면 각 박스의 폰트들이 가로로 정렬됩니다.
·footer__text h3 에 폰트 사이즈를 18px로 해주시고 margin-bottom을 이용해 밑으로 여백을 13px을 주었습니다.
·footer__text ul li a 에 폰트 컬러를 #666으로 주었고, 폰트 사이즈를 14px를 와 폰트 사이의 간격을 1.7로 주었습니다.
·footer__right 에 텍스트를 중앙으로 정렬 해주고, 폰트 컬러 #666, 폰트 사이트를 14px, 폰트 사이의 간격을 1.7로 주었으며, margin-top을이용해 위로 여백을주고 50px과 padding-top을 주어 50px 간격을 주었습니다.
그 후 border-top: 1px solid #d9d9d9; 을 주면 완성 입니다.