구조
<!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>레이아웃1</title>
<link rel="shortcut icon" href="imgs/favicon.ico">
<link rel="stylesheet" href="css/layout2.css">
</head>
<body>
<div class="container">
<header>
<h1>lo<span class="darkblue">go</span></h1>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
<ul class="topmenu">
<li><a href="#">login</a></li>
<li><a href="#">join</a></li>
<li><a href="#">sitemap</a></li>
</ul>
</header>
<section>
<div class="slide">
<div>
<h2>slide title</h2>
<p>모든 국민은 언론·출판의 자유와 집회·결사의 자유를 가진다. 군사법원의 조직·권한 및 재판관의 자격은 법률로 정한다.</p>
<a href="#" class="btn">자세히보기</a>
</div>
</div>
<div class="contents">
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg1"></div>
<p>국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한다.</p>
</article>
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg2"></div>
<p>국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한다.</p>
</article>
<article>
<h3>아티클의 타이틀</h3>
<div class="art-bg bg3"></div>
<p>국회는 헌법 또는 법률에 특별한 규정이 없는 한 재적의원 과반수의 출석과 출석의원 과반수의 찬성으로 의결한...</p>
</article>
<aside>
<ul>
<li><a href="#"><img src="imgs/aside-banner1.jpg" alt="배너"></a></li>
<li><a href="#"><img src="imgs/aside-banner2.jpg" alt="배너"></a></li>
<li><a href="#">aside menu1</a></li>
<li><a href="#">aside menu2</a></li>
</ul>
</aside>
</div>
</section>
<div class="clear"></div>
<footer>
<h5>logo</h5>
<p>저작권, 주소</p>
<p>SNS 버튼</p>
</footer>
</div>
</body>
</html>
CSS
@charset "utf-8";
/*===== reset =====*/
* {margin:0; padding:0; box-sizing:border-box;}
body {font-size:15px; color:#333; background:#E8E8E8;}
ul li {list-style:none;}
a {display:block; color:#333; text-decoration:none;}
.clear {clear:both;}
.container {width:1000px; margin:0 auto; background:#FFF;}
/*===== header =====*/
header {
float:left; position:relative;
width:100px; height:750px;
background:skyblue;
}
h1, nav, .topmenu {position:absolute; width:100%; text-align:center;}
h1 {top:50px; color:#FFF; text-transform:uppercase;}
h1 span {color:darkblue;}
nav {top:50%; transform:translateY(-50%);}
nav a {padding:10px 0;}
.topmenu {bottom:50px;}
.topmenu a {padding:5px 0; font-size:13px;}
/*===== section =====*/
section{float:right;}
.slide {
position:relative;
width:900px; height:400px;
background:orange;
}
.slide div {
position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%);
}
.slide h2 {font-size:42px; text-align:center; text-transform:uppercase;}
.slide p {width:350px; padding:30px 0; text-align:center;}
.slide a {
width:150px; height:50px; margin:0 auto;
text-align:center; line-height:50px;
border:2px solid darkblue; border-radius:25px;
transition:all 0.4s ease;
}
.slide a:hover {color:#FFF; background:darkblue;}
.contents {
display:flex; justify-content:space-between; align-items:center;
width:900px; padding:50px 30px;
}
article {width:30%; background:#F2F2F2; border-radius:5px;}
article h3 {padding:15px 0 10px 15px;}
article .art-bg {height:80px;}
article p {padding:15px;}
.bg1 {background:url(../imgs/bg1.jpg) no-repeat center center;}
.bg2 {background:url(../imgs/bg2.png) no-repeat center center;}
.bg3 {background:url(../imgs/bg3.jpg) no-repeat center center;}
aside {display:none;}
/*===== footer =====*/
footer {
display:flex; justify-content:space-between; align-items:center;
height:100px; padding:0 30px; color:#FFF; background:darkblue;
}