CONTENTS B 영역 BANNER
HTML
<!doctype html>
<html>
<meta charset="utf-8">
<title>중앙정렬 CONTENT B 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>
</
<!-- BANNER CODE -->
<a href="#">
<img src="images/banner.jpg" alt="배너"><span>배너</span>
</a>
CSS
/* banner */
.contents .banner {float: left; position: relative; width: 400px; height: 200px; padding: 10px}
.banner > a {display: block; width: 100%; height: 100%;}
.banner > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.banner > a > span {position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); padding: 5px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: bold;}
CONTENTS C 영역 CONTENT , BANNER
CONTENT = LINK HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>중앙정렬 CONTENTS C TYPE</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<header class="clerfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents clearfix">
<!-- tab_contents code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
<div class="link">
<!-- link code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</body>
</html>
<!-- LINK CODE -->
<a href="#">
<img src="images/contents.jpg" alt="바로가기 1">
<span>바로가기</span>
</a>
CSS
/* link */
.contents .link {position: relative; float: left; width: 400px; height: 200px; padding: 10px;}
.contents .link a {display: block; position:relative; width: 100%; height: 100%;}
.contents .link a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.contents .link a > span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 15px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold;}
BANNER HTML
<!doctype html>
<html>
<meta charset="utf-8">
<title>중앙정렬 CONTENT B 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>
</
<!-- BANNER CODE -->
<a href="#">
<img src="images/banner.jpg" alt="배너"><span>배너</span>
</a>
CSS
/* banner */
.contents .banner {float: left; position: relative; width: 400px; height: 200px; padding: 10px}
.banner > a {display: block; width: 100%; height: 100%;}
.banner > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.banner > a > span {position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); padding: 5px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: bold;}
