소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 푸터 유형02을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
webstandard
- 01_footerType01
- 02_footerType02
- footer02_01.html :
디자인
디자인도 간단합니다.
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!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>배너 유형02</title>
<style>
/* font */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
.gmarket {
font-family: "GmarketSans";
}
/* reset */
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
em, address {
font-style: normal;
}
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
.ir_pm {
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* common */
.gray {
background-color: #F6F8FD;
}
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background: rgba(0,0,0,0.3); */
}
.section {
padding: 120px 0;
text-align: center;
}
.section > h2 {
font-size: 50px;
font-weight: 500;
margin-bottom: 20px;
line-height: 1;
}
.section > p {
font-size: 22px;
font-weight: 300;
margin-bottom: 70px;
line-height: 1.5;
color: #777;
}
.section__desc em {
font-style: normal;
text-decoration: underline;
text-underline-position: under;
}
/* textType */
.footer__inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
text-align: left;
}
.footer__logo {
width: 30%;
}
.footer__logo h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.footer__logo p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
}
.footer__logo .sns ul {
display: flex;
}
.footer__logo .sns li {
margin-right: 5px;
}
.footer__logo .sns li a {
display: inline-block;
width: 45px;
height: 45px;
background-color: #F5F5F5;
border-radius: 50%;
background-image: url(https://webstoryboy.github.io/web2022/webs_img/footer02_icon.svg);
}
.footer__logo .sns li:nth-child(2) a {
background-position: -45px 0;
}
.footer__logo .sns li:nth-child(3) a {
background-position: -90px 0;
}
.footer__logo .sns li:nth-child(4) a {
background-position: -135px 0;
}
.footer__logo .sns li:nth-child(5) a {
background-position: -180px 0;
}
.footer__menu {
width: 70%;
display: flex;
justify-content: space-between;
}
.footer__menu h3 {
font-size: 18px;
font-weight: 500;
margin-bottom: 20px;
}
.footer__menu li a {
display: inline-block;
font-size: 14px;
font-weight: 300;
margin-bottom: 7px;
}
.footer__right {
margin-top: 80px;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: 300;
}
</style>
</head>
<body>
<footer id="footerType" class="footer__wrap section gmarket gray">
<h2 class="ir_so">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__logo">
<h3>Webstoryboy</h3>
<p>
안녕하세요!<br>
문의사항은 메일로 부탁드립니다.<br>
<a href="mailto:webstoryboy@naver.com">webstoryboy@naver.com</a>
</p>
<div class="sns">
<ul>
<li><a href="#"><span class="ir_pm">페이스북</span></a></li>
<li><a href="#"><span class="ir_pm">인스타</span></a></li>
<li><a href="#"><span class="ir_pm">유튜브</span></a></li>
<li><a href="#"><span class="ir_pm">깃헙</span></a></li>
<li><a href="#"><span class="ir_pm">디스코드</span></a></li>
</ul>
</div>
</div>
<div class="footer__menu">
<div>
<h3>레이아웃 영역</h3>
<ul>
<li><a href="#">레이아웃 유형01</a></li>
<li><a href="#">레이아웃 유형02</a></li>
<li><a href="#">레이아웃 유형03</a></li>
<li><a href="#">레이아웃 유형04</a></li>
<li><a href="#">레이아웃 유형05</a></li>
</ul>
</div>
<div>
<h3>메인 영역</h3>
<ul>
<li><a href="#">이미지 유형01</a></li>
<li><a href="#">동영상 유형02</a></li>
<li><a href="#">슬라이드 유형03</a></li>
</ul>
</div>
<div>
<h3>컨텐츠 영역</h3>
<ul>
<li><a href="#">텍스트 유형01</a></li>
<li><a href="#">이미지 유형02</a></li>
<li><a href="#">이미지/텍스트03</a></li>
<li><a href="#">카드 유형04</a></li>
<li><a href="#">배너 유형05</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="#">컨택트 유형01</a></li>
<li><a href="#">푸터 유형02</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>
<address class="footer__right">
©2022 webstroyboy. All rights reserved.
</address>
</div>
</footer>
<!-- //푸터 영역(유형2) -->
</body>
</html>
view2
view3
view4
참고
728x90
