728x90
반응형
푸터 (하단 정보)
.footer__wrap {
background-color: #f5f5f5;
}
.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;
}css의 공통요소는 제외했습니다.
- footer__wrap: footer 전체를 감싸는 div의 배경색을 지정합니다.
- .footer__menu: footer 내의 메뉴를 감싸는 div를 flexbox로 설정합니다.
- .footer__menu > div: 메뉴 아이템을 감싸는 div를 6등분하여 각각의 div의 너비를 16.666%로 설정합니다.
- .footer__menu > div h3: 메뉴 아이템의 제목을 감싸는 h3 태그의 하단 마진을 13px로 설정합니다.
- .footer__menu > div li: 메뉴 아이템의 리스트를 나타내는 li 태그의 줄 높이를 1.9로 설정하고, 폰트 크기를 14px로 설정합니다.
- .footer__menu > div li a: 메뉴 아이템의 링크의 색상을 회색(#666)으로 설정합니다.
- .footer__right: footer 오른쪽에 위치하는 내용을 감싸는 div를 설정합니다. 상단 마진을 50px로, 테두리를 1px의 회색(#D9D9D9)로, 상단 패딩을 50px로, 텍스트 정렬을 중앙으로, 폰트 스타일을 normal로, 줄 높이를 1.6em으로, 색상을 회색(#666)으로, 폰트 크기를 14px로 설정합니다.
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>사이트</h3>
<ul>
<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>Q&A</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>
</ul>
</div>
</div>
<address class="footer__right">
2023 얇고 넓은 대화를 위한 1분 지식 knowledge<br>
All Right Reserved
</address>
</div>
</div>
</footer>
</wrap>
</body>div 박스를 사용하여 6개로 나누었습니다.
완성화면
