<!DOCTYPE html>
<html lang="en">
<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>네이버 메인화면 따라하기</title>
<script src="https://kit.fontawesome.com/4bb639362a.js" crossorigin="anonymous"></script>
<style>
*{margin: 0; padding: 0; text-decoration: none; color: black;}
.header-part{
width: 1190px; margin-left: calc(50% - 595px);}
.header-part .banner{
height: 49px; border:1px solid orangered; box-sizing: border-box;}
.header-part .search{
height: 160px; border:1px solid orange; box-sizing: border-box;}
.main-part .main-menu{
height:52px; position: relative;}
.main-part .main-body{
width:1190px; height: 1000px; border:1px solid blue; box-sizing: border-box;
margin-left: calc(50% - 595px); padding: 20px 30px;}
.footer-part .footer{
width: 1190px; height: 423px; border:1px solid blueviolet; box-sizing: border-box;
margin-left: calc(50% - 595px);}
.search{
position: relative;}
.search .logo-box{
width:222px; height:52px; border:1px solid chocolate; box-sizing: border-box;
position:absolute; top: calc(50% - 26px);}
.search .search-box{
width: 586px; height: 56px; border: 2px solid #19cd60; box-sizing: border-box;
position: absolute; top: calc(50% - 26px); left: 286px;}
.search .search-btnbox{
width: 474px; height: 52px; position: relative;}
.search .search-box-inside{
width: 444px; height: 24px; border: none; font-size: 20px;
position: absolute; top:calc(50% - 12px); left: 15px;}
.search .search-box-inside:focus{
outline: none; font-size: 20px;}
.search .search-btn{
width:56px; height:56px; background-color: #19cd60; position: absolute; top: -2px; right: -2px;
border: none; cursor: pointer;}
.main-menu .menu-bar{
width: 1190px; border: 1px solid blue; box-sizing: border-box; height: 100%;
position: absolute; left: calc(50% - 595px)}
.main-body .section{
width: 750px; height: 100%; border:1px solid crimson; box-sizing: border-box; float: left;}
.main-body .aside{
width: 350px; height: 100%; border: 1px solid darkorange; float: right; box-sizing: border-box; }
.section .advertisement{
height: 135px; border: 1px solid greenyellow; box-sizing: border-box; margin-bottom: 12px;}
.section-newsbanner{height: 49px; background-color: violet;}
.section-newstype{height: 56px; background-color: gray;}
.section .section-middle{
height: 262px; border: 1px solid #e4e8eb; box-sizing: border-box; background-color: white;}
.aside .aside-loginbox{
height: 135px; margin-bottom: 12px;}
.aside .aside-newsbanner{
height: 49px; border: 1px solid #e4e8eb; box-sizing: border-box; position: relative;}
.aside-newsbanner .page-btn{
height: 24px; box-sizing: border-box;
position: absolute; top: 11px; right: 10px; }
.page-btn-prev, .page-btn-next{
width: 24px; height: 24px; float:left; text-align: center; line-height: 24px;
border: 1px solid #e4e8eb; box-sizing: border-box; font-size: 12px; cursor: pointer;}
.page-btn-right{
float: right; margin-left: -1px;}
.aside-loginbox{
padding: 16px 16px 12px 17px; border: 1px solid #dae1e6; background-color: #f7f9fa; box-sizing: border-box;
position: relative;}
.loginbox-inner-msg{
height: 16px; margin-bottom: 11px; font-size: 12px; color: #808080;}
.loginbox-inner-btn{
height: 48px; border:1px solid #15c654; box-sizing: border-box; background-color: #19ce60;
color: white; font-weight: bold; line-height: 48px; text-align: center; font-size: 14px;}
.loginbox-inner-missing{
height: 21px; margin-top: 11px; position: relative; width: 135px; float: left;
bottom: 0; left: 0;}
.iconlock{
float:left; margin-right: 3px; color: #505050; line-height: 21px; font-size: 12px; }
.missing-id{
float: left; font-size: 12px; color: #505050; line-height: 21px; display: block;}
.between-idnpw{
border: 1px solid #505050; border-radius: 50%; display: block; position: absolute;
top: 10px; left:53px;}
.missing-pw{
font-size: 12px; color: #505050; line-height: 21px; display: block; float: right; margin-right: 3px;}
.loginbox-inner-signup{
height: 21px; width: 63px; float: right; margin-top: 11px; position: relative;
line-height: 21px; bottom:0; right: 0;}
.iconuser{
font-size: 12px; float: left; line-height: 21px;}
.signup-btn{
font-size: 12px; color: #505050; float: right;}
.loginbox-link:hover{text-decoration: underline;}
.underline:hover{text-decoration: underline;}
.middle-horizontal{
display: flex; border-bottom: 1px solid #e4e8eb; height: calc(100% / 4); box-sizing: border-box;}
.middle-horizontal:last-child{border-bottom: none;}
.middle-horizontal .h-row{height:65px; border-right: 1px solid #e4e8eb; flex: 1;}
.middle-horizontal .h-row:last-child{border-right: none;}
.middle-horizontal .h-row:hover{background-color: #e4e8eb;}
.main-body:after,
.page-btn::after,
.aside-loginbox-inner::after,
.loginbox-inner-missing::after{
clear: both; content: ''; display: block;}
</style>
</head>
<body>
<div class="home-page">
<header class="header-part">
<div class="banner"></div>
<div class="search">
<div class="logo-box"></div>
<div class="search-box">
<form action="query">
<div class="search-btnbox">
<input type="text" class="search-box-inside">
</div>
<button type="submit" class="search-btn"></button>
</div>
</form>
</div>
</header>
<div class="main-part">
<div class="main-menu">
<div class="menu-bar"></div>
</div>
<div class="main-body">
<section class="section">
<div class="section-top advertisement"></div>
<div class="section-newsbanner"></div>
<div class="section-newstype"></div>
<div class="section-middle">
<div class="middle-horizontal row">
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
</div>
<div class="middle-horizontal row">
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
</div>
<div class="middle-horizontal row">
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
</div>
<div class="middle-horizontal row">
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
<a href="#" class="h-row"><div></div></a>
</div>
</div>
</section>
<aside class="aside">
<div class="aside-loginbox">
<div class="aside-loginbox-inner">
<div class="loginbox-inner-msg">네이버를 더 안전하고 편리하게 이용하세요</div>
<a href="#"><div class="loginbox-inner-btn">NAVER 로그인</div></a>
<div class="loginbox-inner-missing">
<div class="iconlock"><i class="fas fa-lock"></i></div>
<a href="#" class="loginbox-link"><div class="missing-id underline">아이디</div></a>
<a href="#" class="loginbox-link"><span class="between-idnpw"></span>
<a href="#" class="loginbox-link"><div class="missing-pw underline">비밀번호찾기</div></a>
</div>
<a href="#"><div class="loginbox-inner-signup">
<div class="iconuser"><i class="fas fa-user"></i></div>
<div class="signup-btn underline">회원가입</div>
</div>
</a>
</div>
</div>
<div class="aside-newsbanner">
<div class="page-btn">
<div class="page-btn-prev"><i class="fas fa-angle-left"></i></div>
<div class="page-btn-next"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</aside>
</div>
</div>
<div class="footer-part">
<footer class="footer"></footer>
</div>
</div>
</body>
</html>