QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
푸터 유형이란?
웹사이트의 푸터(footer)란 일반적으로 웹페이지의 가장 하단 부분에 위치한 영역을 말합니다. 푸터는 일반적으로 웹사이트의 맨 아래쪽에 있지만, 디자인에 따라 다르게 배치될 수도 있습니다.
푸터에는 다양한 정보나 링크를 제공할 수 있습니다. 일반적으로 푸터에는 다음과 같은 정보가 포함될 수 있습니다.
- 저작권 정보 : 사이트의 저작권 정보 및 사용 조건에 대한 정보가 포함됩니다.
- 연락처 정보 : 회사의 연락처 정보, 이메일 주소, 전화번호 등이 포함될 수 있습니다.
- 사이트 맵 : 전체 웹 사이트의 구성과 링크가 포함될 수 있습니다.
- 개인 정보 보호 정책 : 웹 사이트에서 수집하는 개인 정보와 관련된 정보 및 보호 조치에 대한 정보가 포함됩니다.
- 소셜 미디어 링크 : 회사의 소셜 미디어 계정 링크가 포함될 수 있습니다.
푸터 유형의 장점!
웹사이트의 푸터는 다양한 유형이 존재하며, 각각의 유형마다 다양한 장점이 있습니다. 일반적인 푸터 유형의 장점은 다음과 같습니다.
- 내비게이션 : 푸터에 내비게이션 메뉴를 포함시키면, 방문자들이 더 쉽게 원하는 콘텐츠를 찾을 수 있습니다.
- 소셜 미디어 : 푸터에 소셜 미디어 링크를 포함시키면, 방문자들이 소셜 미디어 계정을 방문하거나 팔로우할 수 있습니다.
- 연락처 정보 : 푸터에 연락처 정보를 포함시키면, 방문자들이 쉽게 연락할 수 있습니다.
- 저작권 정보 : 푸터에 저작권 정보를 포함시키면, 웹사이트 운영자가 자신의 콘텐츠를 보호할 수 있습니다.
- 추가 정보 : 푸터에 추가 정보를 포함시키면, 방문자들이 웹사이트와 관련된 다른 정보를 쉽게 찾을 수 있습니다.
이러한 장점들은 방문자들의 경험을 향상시키고, 웹사이트 운영자가 웹사이트를 보호하고, 추가적인 정보를 제공할 수 있도록 도와줍니다.
푸터 유형 페이지
푸터 유형 페이지 코드
<!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">
<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;
}
/* footer__wrap */
.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.6em;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<footer class="footer__wrap section nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div>
<h3>COMPANY</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>PARTNERSHIP</h3>
<ul>
<li><a href="#">신규 입점 제의</a></li>
<li><a href="#">협력 고객사 등록신청</a></li>
<li><a href="#">중개 업체 확인</a></li>
</ul>
</div>
<div>
<h3>COMMUNITY</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>RECRUIT</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="#">가맹 문의 FAQ</a></li>
<li><a href="#">가맹 상담 신청</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 서리커피 사이트 Portfolio is Power<br>All Right Reserved
</address>
</div>
</div>
</footer>
</body>
</html>
푸터 유형은 다른 유형 사이트들보다 코딩하기가 비교적 굉장히 수월했습니다. 아마도요ㅎㅎㅎ
참고!
| 속성 | 속성 설명 |
| blind | 콘텐츠를 숨기고 싶지만, 스크린 리더기에는 읽혀야 하는 경우 사용합니다. |
| vertical-align | HTML과 CSS에서 사용되는 속성으로, 텍스트나 인라인 요소(inline element)가 포함된 요소를 수직으로 정렬하는 데 사용됩니다. |
| list-style | HTML과 CSS에서 사용되는 속성으로, 목록(list) 요소에 대한 표시 방법을 지정하는 데 사용됩니다. |
| text-decoration | HTML과 CSS에서 사용되는 속성으로, 텍스트에 대한 장식(decoration)을 지정하는 데 사용됩니다. |
| overflow | HTML과 CSS에서 사용되는 속성으로, 요소의 내용(content)이 요소의 크기를 초과할 때 어떻게 처리할지 지정하는 데 사용됩니다. |
| text-align | HTML과 CSS에서 사용되는 속성으로, 텍스트를 가로 방향으로 정렬하는 데 사용됩니다. |
페이지 제작 공통 CSS
다른 페이지를 제작할 때도 공통으로 사용한 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;
}
/* footer__wrap */
.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.6em;
color: #666;
font-size: 14px;
}
</style>
반응형
