“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
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">
</head>
<body>
<section class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h4><a href="">아침밥 레시피</a></h4>
<ul>
<li><a href="">한식</a></li>
<li><a href="">일식</a></li>
<li><a href="">양식</a></li>
<li><a href="">간편식</a></li>
</ul>
</div>
<div>
<h4><a href="">재료선정</a></h4>
<ul>
<li><a href="">탄수화물</a></li>
<li><a href="">단백질</a></li>
<li><a href="">지방</a></li>
<li><a href="">섬유질</a></li>
</ul>
</div>
<div>
<h4><a href="">건강별 정리</a></h4>
<ul>
<li><a href="">심혈관 질환</a></li>
<li><a href="">성인병</a></li>
<li><a href="">고관절 질환</a></li>
</ul>
</div>
<div>
<h4><a href="">레시피 도서 추천</a></h4>
<ul>
<li><a href="">한식</a></li>
<li><a href="">일식</a></li>
<li><a href="">양식</a></li>
<li><a href="">간편식</a></li>
</ul>
</div>
<div>
<h4><a href="">나이별 메뉴</a></h4>
<ul>
<li><a href="">어린이</a></li>
<li><a href="">청소년</a></li>
<li><a href="">청년</a></li>
<li><a href="">중장년</a></li>
<li><a href="">노년</a></li>
</ul>
</div>
<div>
<h4><a href="">Q&A</a></h4>
<ul>
<li><a href="">문의하기</a></li>
<li><a href="">F&A</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2023 아침밥 먹기 실천 위원회<br>All Right Reserved
</div>
</div>
</div>
</section>
</body>
</html>우선 각각의 큰 카테고리 별로 div를 만들어 큰 카테코리는 h4로 감싸고 아래로 작은 메뉴는 li로 감싸 작업하였습니다. 그렇게 6개 정도 만들면 됩니다.
아래로는 홈페이지의 이름이 오게됩니다.
중간에 웹표준에 맞추기 위해 페이지의 제목을 h2로 감싸고 그것을 블라인드 처리하기위해 클래스에 blind를 주어 가립니다.
css
<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;
}
</style>리셋과 common은 전부터 사용하던 것을 그대로 사용하여 정리할 것이 없습니다.
/* footer__wrap */
.footer__wrap {
background-color: #F5F5F5;
}
.footer__menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: 1px solid #D9D9D9;
margin-bottom: 50px;
}
.footer__menu > div {
width: 16.666%;
margin-bottom: 50px;
}
.footer__menu h4 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 16px;
}
.footer__menu ul li {
font-size: 14px;
line-height: 1.9;
}
.footer__menu ul li a {
color: #666;
}
.footer__right {
margin-top: 50px;
text-align: center;
color: #666;
}드디어 footer__wrap입니다.
가장 큰 게 감싸는 footer__wrap아래로 footer__menu라는 클래스를 가지고 있는 div에 display : flex와 flex-wrap: wrap , justify-content: space-between;로 div들의 간격을 맞춥니다.
그 후 footer__menu 아래에 있는 div에 width값을 16.666%, magin-bottom: 50px;으로 맞추어 아래로 라인과 간격을 50px정도벌려놓습니다.
div안에 h4는 폰트사이즈는 18px로 line-height는 1.5, margin-bottom은 16px를 주어 간격을 벌립니다.
그리고 li는 폰트사이즈는 14px로 line-height는 1.9를 줍니다.
아래의 작은 메뉴는 색을 좀더 연하게 맞추기위해 color:#666을 줍니다.
footer__right는 margin-top을 50px를 주어 좀더 내리고 text-align: center를 주어 가운데로 맞춥니다.
글자 색은 color:#666을 줍니다.
참고
https://jo0132.github.io/web2023/site/footerType/footerType01.html
푸터 유형01
jo0132.github.io
https://github.com/jo0132/web2023/blob/main/site/footerType/footerType01.html
GitHub - jo0132/web2023: 수업시간에 배운 수업 예제입니다.
수업시간에 배운 수업 예제입니다. Contribute to jo0132/web2023 development by creating an account on GitHub.
github.com