- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
피그마 화면 입니다.
html코드 입니다.
<body>
<footer class="footer_wrap nexon section">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer_inner">
<div class="footer_menu">
<div>
<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>
<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>
<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>
<h3>고양이 자랑하기</h3>
<ul>
<li><a href="#">앨범</a></li>
<li><a href="#">사진올리기</a></li>
<li><a href="#">장기자랑</a></li>
</ul>
</div>
<div>
<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>
<h3>안내사항</h3>
<ul>
<li><a href="#">찾아오시는길</a></li>
<li><a href="#">회사소개</a></li>
</ul>
</div>
</div>
</div>
<address class="footer_right">
2023 ture403 고양이 사이트 PortFoilo is Power<br>All Right Reserved
</address>
</div>
</footer>
</body>- footer_memu 안에 div 박스를 만들어서 그안에 내용을 적어주었습니다.
- 맨마지막에 address 태그를 써서 마지막 글을 만들었습니다.
css 코드입니다.
*{
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%;
}
ul,ol,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;}
.container {
width: 1160px;
margin: 0 auto;
padding: 0px 20px;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.section {
padding: 120px 0;
}
.footer_wrap {
background-color: #F5F5F5;
}
.footer_menu {
display: flex;
align-content: center;
justify-content: space-between;
}
.footer_menu >div {
width: 16.666%;
}
.footer_menu >div li {
line-height: 1.6;
font-size: 14px;
}
.footer_menu > div li > a {
color: #666;
}
.footer_menu > div h3 {
font-size: 17px;
font-family: 'NexonLv1Gothic';
line-height: 1.5;
margin-bottom: 13px;
color: #000;
}
.footer_right {
margin-top: 50px;
border-top :1px solid #d9d9d9;
padding-top: 50px;
text-align: center;
text-align: center;
font-size: 14px;
line-height: 1.7;
color: #666;
}- footer_memu 에 display:flex를 주었고 균일하게 spce-between을 주었고 align-item : center 를 주어서 가운데로 맞춰습니다.
- footer_memu 안에 있는 a코드의 글씨 색을 #666으로 맞추었습니다.
- address안에 있는 글자는 글자 줄 간격을 1.7로 해주었고 색깔을 #666으로 했습니다.
- 그리고 보더 탑 값을 주어서 회색으로 줄을 줬습니다.
코딩 화면입니다.
https://ture403.github.io/web2023/site/footerType/footerType01.html
푸터 유형01
ture403.github.io
코딩 소스 입니다.
https://github.com/ture403/web2023/blob/main/site/footerType/footerType01.html