HTML
<!doctype html>
<html>
<meta charset="utf-8">
<title>중앙정렬 FOOTER TYPE</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</html>
<body>
<div class="wrapper">
<header class="clearfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents">
<div class="notice">
<!-- notice code -->
</div>
<div class="gallery">
<!-- gallery code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</
<!-- FOOTER CODE -->
A TYPE
<div class="footer_logo"><img src="images/footer_logo.png" alt="푸터로고"></div>
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
<div class="sns">
<a href="#"><img src="images/sns1.jpg" alt="에스엔에스1"></a>
<a href="#"><img src="images/sns2.jpg" alt="에스엔에스2"></a>
<a href="#"><img src="images/sns3.jpg" alt="에스엔에스3"></a>
</div>
CSS
/* footer */
footer {width: 100%; height: 100px; text-align: center;}
footer .footer_logo {float: left; width: 220px; height: 100px; padding: 10px;}
footer .footer_logo > a {display: block; width: 100%; height: 100%; }
footer .footer_logo > a > img {width: 100%; height: 100%; object-fit:cover;}
footer .copy {float: left; width: 780px; height: 100px; font-weight: bold; margin-top: 30px; }
footer .sns {float: left; width: 200px; height: 100px;}
footer .sns a {display: inline-block; margin-top: 30px;}
FOOTER CODE -->
B TYPE
<div class="footer_logo"><a href="#"><img src="images/footer_logo.png" alt="푸터로고"></a></div>
<div class="footer_right">
<ul>
<li><a href="#">하단메뉴 1</a></li>
<li><a href="#">하단메뉴 2</a></li>
<li><a href="#">하단메뉴 3</a></li>
</ul>
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
CSS
/* footer */
footer {width: 100%; height: 100px; background: #ddd; text-align: center; }
footer .footer_logo {float: left; width: 220px; height: 100px; margin-top: 30px;}
footer .footer_logo a { width: 200px; height: 40px;}
footer .footer_logo img { width: 200px; height: 40px; object-fit: cover;}
footer .footer_right {float: left; width: 980px; height: 100px;}
footer .footer_right ul > li {display: inline-block; margin: 20px;}
footer .footer_right p { font-weight: bold;}
FOOTER CODE -->
C TYPE
<div class="footer_left">
<ul>
<li><a href="#">하단메뉴 1</a></li>
<li><a href="#">하단메뉴 2</a></li>
<li><a href="#">하단메뉴 3</a></li>
</ul>
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
<div class="footer_right">
<select>
<option value="#">site 1</option>
<option value="#">site 2</option>
<option value="#">site 3</option>
</select>
</div>
CSS
/* footer */
footer { width: 1200px; height: 100px; background: #eee; text-align: center; }
footer .footer_left { float: left; width: 980px; height: 100px;}
footer .footer_left ul > li {display: inline-block; margin: 20px;}
footer .footer_left .copy {font-weight: bold;}
footer .footer_right { float: left; width: 220px; height: 100px; margin-top: 30px; }
footer .footer_right select {width: 220px; height: 30px;}
FOOTER CODE -->
D TYPE
<div class="footer_left">
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
<div class="footer_right">
<div class="sns">
<ul>
<li><a href="#"><img src="images/sns1.jpg" alt="에스엔에스1"></a></li>
<li><a href="#"><img src="images/sns2.jpg" alt="에스엔에스2"></a></li>
<li><a href="#"><img src="images/sns3.jpg" alt="에스엔에스3"></a></li>
</ul>
</div>
<div class="familysite">
<select>
<option value="#">패밀리사이트 1</option>
<option value="#">패밀리사이트 2</option>
<option value="#">패밀리사이트 3</option>
</select>
</div>
CSS
/* footer */
footer {width: 1200px; height: 100px; text-align: center; margin: 0 auto;}
.footer_left {float: left; width: 1000px; height: 100px; }
.footer_left .copy {margin-top: 30px; font-weight: bold; }
.footer_right {float: right; width: 200px; height: 100px;}
.footer_right .sns > ul > li {display: inline-block; width: 40px; height: 40px; margin: 10px;}
.footer_right .sns > ul > li > a {display: block; width: 100%; height: 100%; }
.footer_right .sns > ul > li > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.footer_right .familysite > select {width: 180px; height: 30px;}
