Skills/CSS3, SCSS
220919 layout_03.html
개발자 윤구나
2022. 9. 19. 16: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_03</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
img {display: block;}
/*-------- header --------*/
.header {
width: 1280px;
margin: 20px auto;
}
.gnb {
height: 40px;
overflow: hidden;
}
.gnb ul {
float: right;
font-size: 0;
}
.gnb ul li {
display: inline;
border: 1px solid black; box-sizing: border-box;
font-size: 16px;
line-height: 40px;
padding: 5px 25px;
}
.gnb ul li:first-child {border-radius: 8px 0 0 8px;}
.gnb ul li:last-child {border-radius: 0 8px 8px 0;}
.logo_box {
font-family: 'Kanit', sans-serif;
padding: 30px 0;
}
.logo_box .logo01 {
font-size: 40px;
}
.logo_box .logo02 {
font-size: 30px;
}
.logo_box:hover {
cursor: pointer;
}
.lnb {
height: 40px;
overflow: hidden;
}
.lnb ul {
float: right;
font-size: 0;
}
.lnb ul li {
display: inline;
border: 1px solid black; box-sizing: border-box;
font-size: 16px;
line-height: 40px;
padding: 5px 25px;
}
.lnb ul li:first-child {border-radius: 8px 0 0 8px;}
.lnb ul li:last-child {border-radius: 0 8px 8px 0;}
/*-------- wrap --------*/
.wrap {
width: 1280px;
margin: 20px auto;
overflow: hidden;
}
/*-------- contents --------*/
.contents {
width: 1000px;
float: left;
margin-right: 20px;
}
.contents section {
height: 220px;
border: 1px solid black; box-sizing: border-box;
font-size: 16px;
margin-bottom: 20px;
padding: 20px;
}
.contents section:last-child {margin: 0;}
/*-------- aside --------*/
.aside {
width: calc(1280px - 1000px - 20px); height: 700px;
border: 1px solid black; box-sizing: border-box;
padding: 10px;
float: right;
overflow: auto;
}
.aside .news {
margin-bottom: 20px;
}
.aside .news>div {
border: 1px solid black; box-sizing: border-box;
margin: 5px 0;
}
.aside .news div {
overflow: hidden;
}
.aside .news div div {
float: left;
}
.aside .news div div:first-child {
margin-right: 5px;
}
.aside .best>div {
border: 1px solid black; box-sizing: border-box;
margin: 5px 0;
}
.aside .best div {
overflow: hidden;
}
.aside .best div div {
float: left;
}
.aside .best div div:first-child {
margin-right: 5px;
}
/*-------- footer --------*/
.footer {
width: 1280px; height: 100px;
border: 1px solid black; box-sizing: border-box;
font-size: 18px;
font-weight: bold;
text-align: center;
margin: 0 auto 20px;
}
</style>
</head>
<body>
<header class="header">
<nav class="gnb">
<ul>
<li><a href="#">Web</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Simulation</a></li>
<li><a href="#">Data</a></li>
</ul>
</nav><!--gnb-->
<div class="logo_box">
<div class="logo01">Rint Development</div>
<div class="logo02">HTML5 + CSS3 Basic</div>
</div><!--logo_box-->
<nav class="lnb">
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</nav><!--lnb-->
</header><!--header-->
<div class="wrap">
<section class="contents">
<section class="contents01">
<a href="#">
<p>
<h1 style="font-size: 40px;">Main Article</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</a>
</section>
<section class="contents02">
<a href="#">
<p>
<h1 style="font-size: 40px;">Main Article</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</a>
</section>
<section class="contents03">
<a href="#">
<p>
<h1 style="font-size: 40px;">Main Article</></h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</a>
</section>
</section><!--contents-->
<section class="aside">
<div class="news">인기기사
<div class="news01"><a href="#">
<div class="news01_1"><img src="./images/news01.jpg" alt="news_img01"></div>
<div class="news01_2">
<p><h3>news01</h3></p>
<p>...</p>
<p>22.09.19</p></a>
</div>
</div><!--news01-->
<div class="news02"><a href="#">
<div class="news02_1"><img src="./images/news01.jpg" alt="news_img02"></div>
<div class="news02_2">
<p><h3>news02</h3></p>
<p>...</p>
<p>22.09.19</p></a>
</div>
</div><!--news02-->
<div class="news03"><a href="#">
<div class="news03_1"><img src="./images/news01.jpg" alt="news_img03"></div>
<div class="news03_2">
<p><h3>news03</h3></p>
<p>...</p>
<p>22.09.19</p></a>
</div>
</div><!--news03-->
<div class="news04"><a href="#">
<div class="news04_1"><img src="./images/news01.jpg" alt="news_img04"></div>
<div class="news04_2">
<p><h3>news04</h3></p>
<p>...</p>
<p>22.09.19</p>
</div></a>
</div><!--news03-->
</div>
<div class="best">BEST
<div class="best01"><a href="#">
<div class="best01_1"><img src="./images/news02.jpg" alt="best_img01"></div>
<div class="best01_2">
<p><h3>best01</h3></p>
<p>...</p>
<p>22.09.19</p></a>
</div>
</div><!--best01-->
<div class="best02"><a href="#">
<div class="best02_1"><img src="./images/news02.jpg" alt="best_img02"></div>
<div class="best02_2">
<p><h3>best02</h3></p>
<p>...</p>
<p>22.09.19</p></a>
</div>
</div><!--best02-->
</div>
</section><!--aside-->
</div><!--wrap-->
<footer class="footer">
<br />
HTML5 + CSS3 Basic<br />
Layout Basic
</footer><!--footer-->
</body>
</html>