728x90
figma처럼 site를 만들어봤어요 !
css와 body소스를 보면 어려운점은 없어보여요
아래는 body소스에요 !
<body>
<footer class="footer__wrap nexon">
<div class="container">
<h2 class="blind">푸터</h2>
<div class="footer__inner">
<div class="footer__menu">
<div class="footer__artcle">
<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 class="footer__artcle">
<h3>별</h3>
<ul>
<li><a href="">알퐁스 도데가 </a></li>
<li><a href="">1885년에 발표한</a></li>
<li><a href="">단편소설이다. </a></li>
</ul>
</div>
<div class="footer__artcle">
<h3>별을 세면</h3>
<ul>
<li><a href="">잠을 잘수있어</a></li>
<li><a href="">누워서</a></li>
<li><a href="">별을 세자 </a></li>
</ul>
</div>
<div class="footer__artcle">
<h3>Countingstar</h3>
<ul>
<li><a href="">Counting </a></li>
<li><a href="">Star</a></li>
<li><a href="">별을 보며</a></li>
<li><a href="">별만큼돈벌자</a></li>
</ul>
</div>
<div class="footer__artcle">
<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 class="footer__artcle">
<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">
2023 getgrovy 별과 사람 사랑 portfolio & Power<br>All Right Reserved
</address>
</div>
</div>
</footer>
</body>아래는 <style> 소스에요 !
<style>
.container {
width: 1160px;
margin: 0 auto;
/* background-color: rgba(0, 0, 0, 0.1); */
padding: 120px 0;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}
.footer__menu {
display: flex;
/* flex-wrap: wrap; */
/* flex-direction: column; */
/* padding-bottom: 100px ; */
/* justify-content: center; */
}
.footer__menu > div {
width: 16.666%;
align-content: center;
/* margin: 0 auto; */
}
.footer__artcle{
/* padding-bottom: 100px ; */
}
.footer__artcle h3 {
margin-bottom: 13px;
}
.footer__artcle ul li {
line-height: 1.9;
font-size: 14px;
}
.footer__artcle ul li a {
color :#666
}
.footer__right {
margin-top: 50px;
border-top: 1px solid #d9d9d9d9;
padding-top: 50px;
text-align: center;
font-style: normal;
line-height: 1.6em;
color:#666;
font-size: 14px;
}
</style>
소스설명보다 오늘은 footer유형에 대해 알아볼게요
footer 사용법 !
footer는 시멘틱 테그 <footer>와 <address>를 사용해요
<address>에는 사이트를 제작자 & 제작자email & 만든시기등을 적어주어서 웹표준양식을 지킵니다.
그리고 어느사이트든 최하단에 위치하거나 좌측하단에 작게라도 만들어서 위치를 고정시킵니다
왜 ? why? 왜냐면 아래와 같은 이유이기 때문이에요 !
footer 유형은 !
- 고객을 붙잡을 수 있는 기회 ( 사이트 영업문구 )
- 찾기 어려운 콘텐츠를 보여주는 sitemap 형식으로 네비를 찾아야 나올 목록을 한번에 출력하기도 해요
이를 도어매트 내비게이션이라 합니다 - 다양한 정보가 집약된 공간 이에요 !
쇼핑몰의 경우엔 footer에 고객센터 전화번호, FAX 번호, 이메일, 카카오톡 ID, 상담가능시간 등
마케팅적으로 활용도 가능합니다. - 상단의 글로벌 내비게이션으로 돌아가기 귀찮을 때 사용하는 수단 ( nav ! )
하단까지 내려왔을시 상단으로 올라가기보단 하단의 nav를 이용할수 있어요 ! - 수상 내역 또는 인증기관을 표기하여 보다 고객에게 신뢰성있는 이미지도 심어줄수 있어요
footer유형에 대해 알아봤어요 꼭 잊지말고 잊더라도 다시와서 상기해야겠쬬 ?
오늘은 날씨도 흐리고 날이 별로네요 ... 감기 조심하셔요🤧 ㅜㅜ 쓰니도 감기에 걸려서 힘드네요 🤒