728x90
반응형
완성 화면
푸터 유형 사이트
코드 보기 / HTML
<footer class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">footer</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>
</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>
<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>
<address class="footer__right">
2023 Byun Woo Hyun 은하수 사이트 Portfolio is Power <br>All Right Reserved
</address>
</div>
</div>
</footer>
코드 보기 / CSS
/* reset */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color:#000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
img {
vertical-align: top;
width: 100%;
}
.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__small {
font-size: 14px;
border-radius: 50px;
background-color: #AC43FF;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.section__h2 {
font-size: 50px;
color: #000;
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 {
background-color: #7B06A4;
color: #fff;
}
.footer__menu{
display: flex;
}
.footer__menu > div {
width: 16.6666%;
}
.footer__menu > div h3 {
margin-bottom: 13px;
font-size: 18px;
font-weight: bold;
}
.footer__menu > div li {
line-height: 1.5;
font-size: 14px;
}
.footer__menu > div li a{
color:#fff;
}
.footer__right {
text-align: center;
margin-top: 50px;
border-top: 3px solid #fff;
padding-top: 50px;
font-style: normal;
line-height: 1.55;
}
.footer__wrap
: footer__wrap 클래스를 가진 요소에 대한 스타일링이다.
푸터 전체의 배경색과 글자 색상을 지정한다. 배경 색상은 #7B06A4이며, 글자 색상은 #fff이다.
.footer__menu > div (> 는 자식 선택자로 footer__menu의 자식 요소인 div에만 속성을 적용)
: footer__menu 클래스를 가진 요소의 자식 요소들에 대한 스타일링이다. display 속성을 flex로 지정하여 자식 요소(내부의 메뉴항목)들을 가로 정렬하게 만든다.
자식 요소들의 너비를 16.6666%로 일정하게 지정하여 총 6개의 자식 요소가 동일한 너비를 갖게 한다.
.footer__menu > div h3
: 각 메뉴 항목의 제목에 대한 스타일을 지정한다.
요소의 아래 여백을 13px로 설정하여 h3 요소 아래쪽 여백을 만든다.
글자 크기는 18px로, 글자 굵기를 굵게 설정한다.
.footer__menu > div li
: 각 메뉴 항목 내부의 리스트 항목에 대한 스타일을 지정한다.
줄간격 속성을 1.5만큼 설정하여 li 요소의 라인 높이를 조절하고, 글자 크기를 14px로 지정한다.
.footer__menu > div li a
: 각 리스트 항목에 대한 링크의 스타일을 지정한다.
a 태그로 감싸진 글자들의 색상을 흰색(#fff)로 설정하여 하이퍼링크나 글자의 색상을 변경한다.
.footer__right
: 푸터의 오른쪽 영역에 대한 스타일을 지정한다.
이 영역은 텍스트 정렬을 가운데로 지정하고, 상단에 3px 두께의 흰색 선을 그려낸다.
그리고 위쪽 패딩값을 50px 지정하며, 폰트 스타일과 줄간격(line-height)에 대한 스타일을 지정한다.