🗂️ Project Review
[HTML&CSS] 네이버 메인 페이지 UI 일부 구현해보기
kimgoat
2023. 12. 24. 13:22
결과 화면
파일구조
index.html
<!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>NAVER</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="src/favicon.jpeg">
</head>
<body>
<div class="container">
<header>
<table class="searchBox">
<td>
<img class= "serarchBox_logo" src="src/logo.png">
<input class="serarchBox_bar" id="search" type="text">
<button class="serarchBox_button"><i class="fas fa-search fa-lg"></i></button>
</td>
</table>
<div class="notificationBox">
<div class="notificationBox_text">
<span style="color: #1bce60;">Kimgoat 김염소 공부방 <br></span>
<span style="color: gray;">안녕하시렵니까?</span>
</div>
<img class="notificationBox_img" src="https://cdn-icons-png.flaticon.com/512/4245/4245734.png">
</div>
</header>
<nav>
<div class="navBox">
<div class="navBox_category">
<ul class="navBox_emphasisItem">
<li><i class="fas fa-envelope-open"></i>메일</li>
<li>카페</li>
<li>블로그</li>
<li>지식 iN</li>
<li>쇼핑</li>
<li>쇼핑 LIVE</li>
<li>Pay</li>
<li><i class="fas fa-play fa-sm"></i>TV</li>
</ul>
<ul class="navBox_nomalItem">
<li>사전</li>
<li>뉴스</li>
<li>증권</li>
<li>부동산</li>
<li>지도</li>
<li>VIBE</li>
<li>책</li>
<li>웹툰</li>
</ul>
<button class="navBox_button"> 더보기 <i class="fas fa-angle-down"></i></button>
</div>
<div class="navBox_weatherBox">
<span>미세 😄</span>
<span class="navBox_weatherBox_dustState" style="border-right: 1px solid rgb(218, 218, 218) ;">보통</span>
<span>초미세 😡</span>
<span class="navBox_weatherBox_dustState">나쁨</span>
</div>
</div>
</nav>
<main>
<div class="contentBox">
<div class="contentBox_AD">
<img src="https://file2.nocutnews.co.kr/newsroom/image/2021/11/01/202111011920009775_0.jpg">
</div>
</div>
<div class="sideBox">
<div class="sideBox_loginBox">
<div class="sideBox_loginBox_textBox">
<span class="sideBox_loginBox_text">네이버를 더 안전하고 편리하게 이용하세요</span>
</div>
<div class="sideBox_loginBox_buttonBox">
<button class="sideBox_loginBox_button">NAVER logIn</button>
</div>
<div class="sideBox_loginBox_itemBox">
<div class="sideBox_loginBox_itemBox_serachAccount">
<button><i class="fas fa-lock"></i>아이디 •</button>
<button>비밀번호찾기</button>
</div>
<div class="sideBox_loginBox_itemBox_newAccount">
<button><i class="fas fa-user"></i>회원가입</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<div>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/e776f24476.js" crossorigin="anonymous"></script>
</body>
</html>
style.css
body{
width: 100vw;
margin: 0%;
}
header{
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
}
.serarchBox_logo{
width: 230px;
height: 60px;
margin-right: 15px;
margin-bottom: 8px;
}
.serarchBox_bar{
width: 530px;
height: 50px;
border: 2px solid #1bce60;
}
.serarchBox_button{
border: none;
display: flex;
width: 55px;
height: 56px;
background-color: #1bce60;
align-items: center;
justify-content: center;
cursor: pointer;
}
.serarchBox_button i{
color: white;
}
.searchBox td{
display: flex;
align-items: center;
}
.notificationBox{
margin-left: 90px;
display: flex;
}
.notificationBox_text{
align-items: center;
text-align: end;
padding: 10px;
}
.notificationBox_img{
width: 50px;
height: 50px;
}
nav{
display: flex;
height: 50px;
width: 100vw;
border-top: 1px solid rgb(202, 202, 202);
border-bottom: 1px solid rgb(202, 202, 202);
box-shadow: 1px 1px 1px rgb(216, 216, 216);
}
.navBox{
margin: auto;
justify-content: space-around;
width: 1150px;
height: 50px;
display: flex;
align-items: center;
}
.navBox ul{
list-style: none;
display: flex;
padding: 0%;
}
.navBox li {
margin: 0px 5px 0px 5px;
}
.navBox li i{
color: #1bce60;
margin-right: 5px;
}
.navBox_category{
display: flex;
width: 800px;
align-items: center;
font-weight: 800;
cursor: pointer;
}
.navBox_emphasisItem {
color: #1bce60;
}
.navBox_button{
border: none;
background-color: white;
height: 30px;
margin-left: 5px;
color: gray;
cursor: pointer;
}
.navBox_wearherBox{
display: flex;
width: 250px;
height: 50px;
}
.navBox_weatherBox_dustState{
font-weight: 800;
padding-right: 8px;
padding-left: 8px;
}
main{
display: flex;
justify-content: center;
align-items: center;
}
.contentBox{
width: 760px;
height: 100vh;
margin-right: 30px;
margin-top: 20px;
}
.contentBox_AD img{
width: 760px;
height: 430px;
}
.sideBox{
width: 360px;
height: 100vh;
margin-top: 20px;
}
.sideBox_loginBox{
width: 360px;
height: 135px;
background-color: #f7f9fa;
border: 1px solid rgb(202, 202, 202);
margin: auto;
}
.sideBox_loginBox_textBox{
display: flex;
justify-content: center;
margin: 13px 0px 13px 0px;
}
.sideBox_loginBox_text{
font-size: 13px;
color: gray;
}
.sideBox_loginBox_buttonBox{
display: flex;
justify-content: center;
}
.sideBox_loginBox_button{
border: none;
width: 315px;
height: 45px;
background-color: #1bce60;
color: white;
font-size: 25px;
font-weight: 800;
justify-content: center;
}
.sideBox_loginBox_itemBox{
display: flex;
width: 310px;
margin: 13px 22px;
justify-content: space-between;
}
.sideBox_loginBox_itemBox button {
border: none;
background-color: #f7f9fa;
color: gray;
padding: 0%;
}
.sideBox_loginBox_itemBox i{
margin-right: 5px;
}
footer{
height: 430px;
background-color: #f7f9fa;
border-top: 1px solid rgb(202, 202, 202);
}
src 폴더 내부 파일
