다른 명언
728x90
반응형
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>
<li><a href="#">사막여우 도움주기</a></li>
<li><a href="#">사막여우와 함께살기</a></li>
</ul>
</div>
<div>
<h3>사막에 사는 종류</h3>
<ul>
<li><a href="#">Fennec fox</a></li>
<li><a href="#">Pale fox</a></li>
<li><a href="#">Cape fox</a></li>
<li><a href="#">Blanford's fox</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>
<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>
</div>
<address class="footer__right">
2023 진블로그 사막여우 사이트 Portfolio is power <br>All Right Reserved
</address>
</div>
</footer>
</body>6개의 영역으로 나누어 주기 위해 6개의 div박스를 footer__menu 클래스 안에 넣어주었습니다.
각 div박스 안에 li 태그를 넣어 텍스트를 리스트 형식으로 적용하였습니다.
<style>
* {
margin: 0;
padding: 0;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
.blind {
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
}
li {
list-style: none;
}
.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__small {
background-color: rgba(12, 209, 174, 0.64);
font-size: 14px;
border-radius: 50px;
color: black;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
padding: 1px 23px;
}
.section.center {
text-align: center;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 1.5;
color: #666;
margin-bottom: 70px;
font-weight: 300;
}
/* 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.7;
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.6;
color: #666;
font-size: 14px;
}
</style>/* footer wrap */ 윗 부분은 저번과 같은 css공통 요소입니다.
전체 영역에 display-flex를 주어 영역에 맞게 정렬을 해주었습니다.
.footer__menu div 에 width값을 16.666% 주어 6개의 div박스의 width값을 영역에 나뉘어 들어가게 해주었습니다.
h3에 margin-bottom 값을 주어 아래의 li 태그와 간격을 주었습니다.
li 태그 안의 텍스트들의 줄 높이를 1.7 주고, 텍스트 크기는 14px로 설정하였습니다.
마지막으로 footer__right 에는 margin을 top으로 50px을 주어 윗부분의 텍스트들과 거리 차이를 두었습니다.
이 부분에는 border-top을 이용하여 1px의 선을 넣어주었습니다.
그 밑으로는 padding-top을 50px 주어 선 밑으로 거리 차이를 더 두었습니다.
그 이후 text-align: center을 적용하여 텍스트를 중간으로 이동 시켰습니다.
728x90