TIL 59 | ★다방 랜딩페이지20(Footer)
패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. 웹페이지의 하단 요소인 Footer를 작성하며 배운 내용들을 적어본다.
Footer❓
사이트 하단 부분의 영역을 의미한다. header와 마찬가지로 기능은 없지만 영역구분의 의미가 있는 <footer> 태그를 가지고 있다.
HTML Entity❓
HTML에서 유니코드를 입력하면 자동으로 불러와지는 특수기호들이 있다. 아래 그림처럼 HTML에 ©
를 입력하면 출력은 자동으로 © 이렇게 된다. <div>
로 입력하면 velog에서도 <div>
를 백틱기호 없이 사용할 수 있다! 수많은 엔티티들이 있어서 링크를 첨부하고 필요할 때마다 참조해서 사용하면 좋글 것같다. 제일 쉽게 작성해 놓은 사이트 url을 첨부한다
더 자세한 엔티티 목록 참고는 여기👍
https://unicode-table.com/kr/html-entities/
HTML
- btn-group을 만들어서 버튼 3개를 묶어서 제어하였다
- copyright 클래스
1. ©
를 통해 ©를 자동으로 출력할 수 있게 하였다
2. <span class="this-year">
를 통해 해가 바뀔 때마다 자동으로 년도가 바뀌도록 하였다(동작 관련 코드는 JS에서 제어하였다)
<!-- FOOTER -->
<!-- 사이트 하단 부분의 영역을 의미하는 footer -->
<footer>
<div class="inner">
<ul class="menu">
<li><a href="javascript:void(0)" class="green">개인정보처리방침</a></li>
<li><a href="javascript:void(0)">영상정보처리기기 운영관리 방침</a></li>
<li><a href="javascript:void(0)">홈페이지 이용약관</a></li>
<li><a href="javascript:void(0)">위치정보 이용약관</a></li>
<li><a href="javascript:void(0)">스타벅스 카드 이용약관</a></li>
<li><a href="javascript:void(0)">윤리경영 핫라인</a></li>
</ul>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn--white">찾아오시는 길</a>
<a href="javascript:void(0)" class="btn btn--white">신규입점제의</a>
<a href="javascript:void(0)" class="btn btn--white">사이트 맵</a>
</div>
<div class="info">
<span>사업자등록번호 201-81-21515</span>
<span>(주)스타벅스 코리아 대표이사 이석구</span>
<span>TEL : 02) 3015-1100 / FAX : 02) 3015-1106</span>
<span>개인정보 책임자 : 강기원</span>
</div>
<p class="copyright">
© <span class="this-year"></span> Starbucks Coffee Company. All Rights Reserved.
</p>
<img src="./images/starbucks_logo_only_text.png" alt="" class="logo">
</div>
</footer>
JS
- thisYear.textContent > 요소가 가지고 있는 글자 내용을 알아내거나 값을 지정할 수 있다
- new Date().getFullYear(); > Date()는 현재 날짜 정보를 가지고 있는 객체이다. Date() 객체에 .getFullYear() method를 실행해주면 현재 년도의 정보가 숫자 데이터로 반환된다
const thisYear = document.querySelector('.this-year');
thisYear.textContent = new Date().getFullYear();
CSS
- footer .menu li::before > li 태그들(개인정보처리방침뒤부터 글자들) 사이에 회색 점을 찍어주기 위해 가상요소선택자 ::before를 사용하였다
- footer .menu li:last-child::before > li 태그 제일 앞의 점은 안 보이도록 제어하기 위해 li태그의 가장 마지막 요소(li:last-child)를 선택자로 두고
display:none;
값을 주었다
- img 요소가 diplay: block; + margin: 0 auto;인 경우 width 속성이 없어도 가운데 정렬이 가능하다
/* FOOTER */
footer{
background-color: #272727;
border-top: 1px solid #333;
}
footer .inner{
padding: 40px 0 60px 0;
}
footer .menu{
display: flex;
justify-content: center;
}
footer .menu li{
position: relative;
}
footer .menu li::before{
content: "";
width: 3px;
height: 3px;
background-color: #555;
position: absolute;
top: 0;
bottom: 0;
right: -1px;
margin: auto;
}
/* li 태그 제일 앞의 점은 안 보이게 하겠다 */
footer .menu li:last-child::before{
display: none;
}
footer .menu li a {
color: #ccc;
font-size: 12px;
font-weight: 700;
padding: 15px;
display: block;
}
footer .menu li a.green {
color: #669900;
}
footer .btn-group {
margin-top: 20px;
display: flex;
justify-content: center;
}
footer .btn-group .btn {
font-size: 12px;
margin-right: 10px;
}
footer .btn-group .btn:last-child {
margin-right: 0;
}
footer .info {
margin-top: 30px;
text-align: center;
}
footer .info span{
margin-right: 20px;
color: #999;
font-size: 12px;
}
footer .info span:last-child {
margin-right: 0;
}
footer .copyright{
color: #999;
font-size: 12px;
text-align: center;
margin-top: 12px;
}
footer .logo{
margin: 30px auto 0;
}
Author And Source
이 문제에 관하여(TIL 59 | ★다방 랜딩페이지20(Footer)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@yeonbee/TIL-59-다방-랜딩페이지20다중요소슬라이드
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
display:none;
값을 주었다/* FOOTER */
footer{
background-color: #272727;
border-top: 1px solid #333;
}
footer .inner{
padding: 40px 0 60px 0;
}
footer .menu{
display: flex;
justify-content: center;
}
footer .menu li{
position: relative;
}
footer .menu li::before{
content: "";
width: 3px;
height: 3px;
background-color: #555;
position: absolute;
top: 0;
bottom: 0;
right: -1px;
margin: auto;
}
/* li 태그 제일 앞의 점은 안 보이게 하겠다 */
footer .menu li:last-child::before{
display: none;
}
footer .menu li a {
color: #ccc;
font-size: 12px;
font-weight: 700;
padding: 15px;
display: block;
}
footer .menu li a.green {
color: #669900;
}
footer .btn-group {
margin-top: 20px;
display: flex;
justify-content: center;
}
footer .btn-group .btn {
font-size: 12px;
margin-right: 10px;
}
footer .btn-group .btn:last-child {
margin-right: 0;
}
footer .info {
margin-top: 30px;
text-align: center;
}
footer .info span{
margin-right: 20px;
color: #999;
font-size: 12px;
}
footer .info span:last-child {
margin-right: 0;
}
footer .copyright{
color: #999;
font-size: 12px;
text-align: center;
margin-top: 12px;
}
footer .logo{
margin: 30px auto 0;
}
Author And Source
이 문제에 관하여(TIL 59 | ★다방 랜딩페이지20(Footer)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeonbee/TIL-59-다방-랜딩페이지20다중요소슬라이드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)