Skills/CSS3, SCSS
220916 layout_test_02
개발자 윤구나
2022. 9. 15. 17:57
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout_test_02</title>
<style>
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
/*-------- header --------*/
.header {
width: 1280px;
background-color: #ccc;
margin: 0 auto;
}
.header .gnb {
overflow: hidden;
}
.header .gnb ul {
font-size: 0;
float: right;
}
.header .gnb li {
display: inline-block;
padding: 0 20px;
margin: 10px 0;
border-right: 1px solid #999;
line-height: 10px;
font-size: 12px;
}
.header .gnb li:last-child {
border: none;
}
.header .logo {
width: 100px; height: 100px;
background-color: #999;
margin: 10px auto;
text-align: center;
line-height: 100px;
}
.header .lnb {
width: 1280px; height: 30px;
position: relative;
z-index: 9999;
}
.header .lnb li {
width: 256px; height: 30px;
float: left;
background-color: #aaa;
text-align: center;
line-height: 30px;
}
.header .lnb li li {
display: none;
}
.header .lnb:hover li li {
display: block;
}
/*-------- visual_main --------*/
.visual_main .main {
width: 1280px; height: 300px;
background-color: yellow;
font-size: 50px;
text-align: center;
line-height: 300px;
margin: 10px auto;
position: relative;
z-index: 1;
}
/*-------- contents01 --------*/
.contents01 {
width: 1280px;
background-color: #ccc;
overflow: hidden;
margin: 0 auto;
}
.contents01 .event {
width: 1260px; height: 625px;
background-color: #999;
margin: 0 auto;
}
.contents01 .event div{
border: 1px solid black; box-sizing: border-box;
float: left;
}
.contents01 .event01 {
width: 625px; height: 625px;
margin-right: 10px;
}
.contents01 .event02 {
margin-bottom: 10px;
}
.contents01 .eve {
width: 625px; height: 307.5px;
}
.contents01 .product {
width: 1260px; height: 625px;
background-color: #999;
margin: 10px auto 0;
}
.contents01 .product>div {
width: 625px; height: 625px;
border: 1px solid black; box-sizing: border-box;
float: left;
}
.contents01 .prod {
width: 307.5px; height: 307.5px;
background-color: yellow;
float: left;
}
.contents01 .product .pd1 {
width: 623px; height: 307.5px;
background-color: green;
margin-right: 8px;
}
.contents01 .product .pd1 .product01 {
margin-right: 8px;
}
.contents01 .product .pd2 {
width: 623px; height: 307.5px;
background-color: green;
margin-top: 8px;
}
.contents01 .product .pd2 .product03 {
margin-right: 8px;
}
.contents01 .product .product05 {
margin-left: 10px;
}
/*-------- wide_banner --------*/
.wide_banner {
height: 250px;
background-color: #ccc;
text-align: center;
line-height: 250px;
font-size: 50px;
font-weight: bold;
margin: 10px 0;
}
/*-------- contents02 --------*/
.contents02 {
width: 1280px;
background-color: #ccc;
margin: 0 auto 10px;
overflow: hidden;
}
.contents02 .best {
width: 900px; height: 450px;
background-color: #999;
float: right;
margin: 10px 10px 10px 0;
}
.contents02 .best .best_box01 {
width: 900px; height: 220px;
margin-bottom: 10px;
}
.contents02 .best .best_box02 {
width: 900px; height: 220px;
}
.contents02 .best .best_box01 div,
.contents02 .best .best_box02 div{
margin-right: 10px;
}
.contents02 .best .best_box01 div:last-child,
.contents02 .best .best_box02 div:last-child {
margin: 0;
}
.contents02 .best div div {
width: 217.5px; height: 220px;
border: 1px solid black; box-sizing: border-box;
float: left;
}
.contents02 .insta {
width: 1260px; height: 504px;
background-color: #999;
overflow: hidden;
margin: 0 auto;
}
.contents02 .insta div {
width: 252px; height: 252px;
border: 1px solid black; box-sizing: border-box;
float: left;
}
/*-------- footer --------*/
.footer {
background-color: #999;
}
.footer .foot {
width: 1280px;
background-color: #ccc;
margin: 0 auto;
overflow: hidden;
}
.footer .logo {
width: 100px; height: 100px;
border: 1px solid black; box-sizing: border-box;
float: left;
margin: 10px 10px 0 10px;
}
.footer .copyright {
width: 1150px; height: 100px;
border: 1px solid black; box-sizing: border-box;
float: left;
margin-top: 10px;
}
</style>
</head>
<body>
<header class="header">
<nav class="gnb">
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Site_map</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav><!-- gnb -->
<div class="logo">
<h2>logo</h2>
</div><!-- logo -->
<nav class="lnb">
<ul>
<li>menu01
<ul>
<li><a href="#">menu01-1</a></li>
<li><a href="#">menu01-2</a></li>
<li><a href="#">menu01-3</a></li>
<li><a href="#">menu01-4</a></li>
</ul>
</li>
<li>menu02
<ul>
<li><a href="#">menu02-1</a></li>
<li><a href="#">menu02-2</a></li>
<li><a href="#">menu02-3</a></li>
<li><a href="#">menu02-4</a></li>
</ul>
</li>
<li>menu03
<ul>
<li><a href="#">menu03-1</a></li>
<li><a href="#">menu03-2</a></li>
<li><a href="#">menu03-3</a></li>
<li><a href="#">menu03-4</a></li>
</ul>
</li>
<li>menu04
<ul>
<li><a href="#">menu04-1</a></li>
<li><a href="#">menu04-2</a></li>
<li><a href="#">menu04-3</a></li>
<li><a href="#">menu04-4</a></li>
</ul>
</li>
<li>menu05
<ul>
<li><a href="#">menu05-1</a></li>
<li><a href="#">menu05-2</a></li>
<li><a href="#">menu05-3</a></li>
<li><a href="#">menu05-4</a></li>
</ul>
</li>
</ul>
</nav><!-- lnb -->
</header><!-- header -->
<section class="visual_main">
<div class="main">visual_main</div>
</section><!-- visual main -->
<section class="contents01">
<div class="event">
<div class="event01"><a href="#">event01</a></div>
<div class="event02 eve"><a href="#">event02</a></div>
<div class="event03 eve"><a href="#">event03</a></div>
</div><!-- event -->
<div class="product">
<div>
<div class="pd1">
<div class="product01 prod"><a href="#">product01</a></div>
<div class="product02 prod"><a href="#">product02</a></div>
</div>
<div class="pd2">
<div class="product03 prod"><a href="#">product03</a></div>
<div class="product04 prod"><a href="#">product04</a></div>
</div>
</div>
<div class="product05"><a href="#">product05</a></div>
</div><!-- product -->
</section><!-- contents01 -->
<section class="wide_banner">
wide_banner
</section><!-- wing_banner -->
<section class="contents02">
<div class="best">
<div class="best_box01">
<div class="best01">best01</div>
<div class="best02">best02</div>
<div class="best03">best03</div>
<div class="best04">best04</div>
</div>
<div class="best_box02">
<div class="best05">best05</div>
<div class="best06">best06</div>
<div class="best07">best07</div>
<div class="best08">best08</div>
</div>
</div>
<div class="insta">
<div class="in01">in01</div>
<div class="in02">in02</div>
<div class="in03">in03</div>
<div class="in04">in04</div>
<div class="in05">in05</div>
<div class="in06">in06</div>
<div class="in07">in07</div>
<div class="in08">in08</div>
<div class="in09">in09</div>
<div class="in10">in10</div>
</div>
</section><!-- contents02 -->
<footer class="footer">
<div class="foot">
<section class="logo">
logo
</section>
<section class="copyright">
copyright
</section>
</div>
</footer>
</body>
</html>