반응형
footer bar에는 보통 이용약관과 개인정보취급방침, 고객센터, Copyright 등이 들어간다.
<style>
div, p{ /*boreder 영역 내에 박스 크기를 맞춘다.*/
box-sizing: border-box;
border: 1px solid black; /*틀을 확인하기 위해 작성한 것. 생략해도 된다.*/
}
#footer{ /*가로 1000px, 높이 200px*/
width: 1000px;
height: 200px;
}
#footer>div{ /*footer의 모든 div 태그들을 footer 너비의 100%로 가로길이 지정한다.*/
width: 100%;
}
/*footer_1 영역*/
#footer_1{
height: 15%; /*footer_1의 높이를 footer 높이의 15%로 지정한다.*/
padding-top: 7px; /*padding 영역의 top 위치에서 7px 만큼 이동한다.*/
}
#footer_1>a{
text-decoration: none;
color: black;
font-weight: bold;
margin: 15px;
}
/*footer_2 영역*/
#footer_2{
height: 85%; /*footer_1의 높이를 뺀 85% 만큼을 footer_2의 높이로 지정한다.*/
}
#footer_2>p{
width: 100%;
margin: 0; /*margin 값을 0으로 초기화*/
font-size: 12px;
box-sizing: border-box; /*박스 크기를 테두리 영역으로 지정한다.*/
}
#p1{
height: 80%; /*footer_2 높이의 80%를 p1의 높이로 지정한다.*/
padding: 10px; /*테두리와 content 영역 사이의 거리를 padding으로 10px 조절한다.*/
}
#p2{
height: 20%; /*p1의 높이를 뺀 20%를 p2의 높이로 지정한다.*/
text-align: center; /*텍스트를 가운데 정렬한다.*/
padding: 6px;
}
</style>
<body>
<div id="footer">
<div id="footer_1">
<a href="#">이용약관</a>|
<a href="#">개인정보취급방침</a>|
<a href="#">인재채용</a>|
<a href="#">고객센터</a>
</div>
<div id="footer_2">
<p id="p1">
서울특별시 강남구 테헤란로 1234 (역삼동, YJ티스토리센터) <br>
사업자 등록번호 : 123-45-678910 <br>
통신판매업신고 : 강남 12345호 <br>
업무집행자 : 홍길동 <br>
고객센터 : 1544-0000 (평일 09:00 ~ 18:00) <br>
</p>
<p id="p2">
Copyright © 2021-2022 YJ tistory All Right Reserved
</p>
</div>
</div>
</body>
반응형