2023.8.31 기준 네이버 화면이다. 위 사진.
이건 내가 따라 만들어본 네이버 상단 화면이다.
화면 구성은 따라해보려 했고, 기능 구현은 하지 않았다.
픽셀 정도의 차이는 있을 수 있으나, 최대한 따라 하려 했따.
가로 1400px 기준.
네이버를 따라 하는 강의를 먼저 보았지만,
현재 네이버와는 예전 네이버의 기준으로 하기에, 그걸 참고 하여 현재의 네이버를 만들어 봤다.
소스코드를 올린다.
이미지 소스 링크에 대해선, 해당 네이버 출처로 문제가 있을 거 같아 첨부하지 않았다.
하지만 추출 하는 법에 대해선 바로 다음 글 순서에 올려두었다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Naver</title>
<style>
* {
box-sizing: border-box;
}
body, html {
padding: 0px;
margin: 0px;
background-color: #1E1E20;
}
#header {
padding: 0px;
display: flex;
justify-content: center;
}
#header-center {
padding: 0px;
position: absolute;
width: 1280px;
height: 261px;
display: flex;
background-color: #1E1E20;
flex-direction: column;
align-items: center;
}
#header-search {
border-style: solid;
border-color: #03C75A;
border-radius: 30px;
border-width: 0.8px;
position: absolute;
top: 64px;
left: 49.4%;
width: 706px;
height: 59.6px;
display: flex;
align-items: center;
transform: translateX(-50%);
flex-direction: column;
flex-direction: row;
vertical-align: center;
z-index: 99;
}
#searchBoxForm {
height: 58px;
display: flex;
align-items: center;
justify-content: space-between; /* 요소들을 좌우로 정렬 */
width: 100%;
}
.header-searchBox {
width: 100%;
height: 58px;
display: inline-block;
position: relative;
box-sizing: border-box;
background-color: #1E1E20;
outline: none;
border-style: none;
caret-color: white;
font-size: 1.3rem;
font-weight: bold;
color: white;
align-items: center;
}
.header-searchBox::placeholder {
font-size: 1.2rem;
font-weight: normal;
color: #4B4C4D;
}
.header-keyboard {
display: inline-block;
width: 24px;
height: 16px;
margin-right: 7px;
}
.header-keyboard a {
background-image: url(sp_main.png);
background-size: 434px 422px;
width: 24px;
height: 16px;
content: '';
display: block;
background-position: 818px -692px;
}
.header-arrowDown {
display: block;
width: 22px;
height: 58px;
position: relative;
border-style: none;
background-color: #1E1E20;
}
.header-arrowDown a {
content: "";
display: block;
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -324px -174px;
background-repeat: no-repeat;
width: 10px;
height: 6px;
}
.header-btnSearch {
box-sizing: border-box;
border-style: none;
width: 66px;
height: 58px;
background-color: transparent;
cursor: pointer;
z-index: 0;
margin-left: 4px;
}
.header-btnSearch a {
content: "";
display: flex;
align-content: center;
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -365px -213px;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}
.header-topMenu {
position: absolute;
top: 15px;
left: -19px;
padding: 10px;
}
.header-topMenu a {
background-image: url("sp_main.png");
background-size: 433px 425px;
width: 26.5px;
height: 29px;
content: '';
display: block;
background-position: 100px -710px;
}
.header-pay {
position: absolute;
top: 15px;
left: 32px;
padding: 10px;
}
.header-pay a {
background-image: url("sp_main.png");
background-size: 438px 426px;
width: 30.5px;
height: 31px;
content: '';
display: block;
background-position: -1px -742px;
}
.header-talk {
position: absolute;
top: 18px;
right: 48px;
width: 46px;
height: 46px;
display: flex;
justify-items: center;
justify-content: center;
align-items: center;
}
.header-talk a {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -364px -81px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
display: block;
position: relative;
content: '';
justify-items: center;
vertical-align: center;
}
.header-talk a:hover {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -364px -81px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
display: block;
position: relative;
content: '';
justify-items: center;
vertical-align: center;
}
.header-bell {
position: absolute;
top: 18px;
right: -2px;
width: 48px;
height: 46px;
display: flex;
justify-items: center;
justify-content: center;
align-items: center;
}
.header-bell a {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -364px -27px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
display: block;
position: relative;
content: '';
justify-items: center;
vertical-align: center;
}
.header-logo {
width: 68px;
height: 58px;
padding: 17px;
padding-left: 25px;
display: flex;
box-sizing: border-box; /* padding을 요소의 크기에 포함 */
}
.header-logo a:before {
background-image: url("sp_main.png");
background-size: 434px 422px;
width: 24px;
height: 24px;
content: '';
display: flex;
background-position: 43px -25px;
}
.header-logo a::after {
background-color: #3c3e3e;
}
.blind {
/* 시각장애인을 위한 보이지 않게 설정 */
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
#nav {
display: block;
border-style: initial;
width: 676px;
height: 75px;
margin-top: 36px;
margin-left: -49px;
margin-bottom: 0px;
position: absolute;
top: 75px;
/*transform-origin: top left; !* 확대의 기준점을 좌상단으로 설정 *!*/
}
.nav-imgBox {
/*transform: scale(1.018); !* 현재 영역을 25% 확대 *!*/
transform: scale(1.0); /* 현재 영역을 25% 확대 */
}
#nav ul {
margin: 0px;
padding: 0px;
display: flex;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 20px;
}
#nav ul li {
position: relative;
display: block;
align-items: center;
justify-content: center;
content: '';
width: 64px;
height: 75px;
text-align: center; /* 가운데 정렬을 위해 텍스트 정렬 설정 추가 */
margin: 3.5px;
}
#nav ul li a {
text-decoration: none;
}
/*#nav ul li span:nth-child(2),*/
#nav ul li span {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto; /* 가운데 정렬을 위한 좌우 마진 자동 설정 */
font-size: 14.7px;
color: white;
margin: 3px;
}
#nav-mailImg {
display: block;
position: relative;
align-items: center;
justify-content: center;
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -250px -90px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
align-content: center;
}
#nav-cafeImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -250px 0px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-blogImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -201px -98px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-shoppingImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -90px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-newsImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: 0px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-financeImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -180px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-landImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -45px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-mapImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -201px 0px;
background-repeat: no-repeat;
width: 48px;
height: 48px;
}
#nav-webtoonImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -225px -209px;
background-repeat: no-repeat;
width: 44px;
height: 44px;
}
#nav-moreImg {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -87px -201px;
background-repeat: no-repeat;
width: 22px;
height: 6px;
}
.nav-imgBorder {
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -142px -59px;
background-repeat: no-repeat;
width: 54px;
height: 54px;
}
.nav-imgBorder:hover{
background-image: url(sp_main.png);
background-size: 434px 422px;
background-position: -61px -70px;
background-repeat: no-repeat;
width: 54px;
height: 54px;
}
</style>
</head>
<body>
<header id="header">
<div id="header-center">
<div id="header-search">
<div>
<div class="header-logo">
<a href="#">
<span class="blind">네이버</span>
</a>
</div>
<a href="#"></a>
</div>
<form action="#" id="searchBoxForm">
<label class="blind" for="SearchBox">검색창</label>
<input class="header-searchBox" id="SearchBox" type="text" placeholder="검색어를 입력해 주세요.">
<div class="header-keyboard">
<a href="#"></a>
</div>
<button class="header-arrowDown">
<a href="#"></a>
</button>
<button class="header-btnSearch">
<a href="#"></a>
</button>
<button class="blind">
<span class="blind">검색</span>
</button>
</form>
</div>
<div class="header-topMenu">
<a href="#"></a>
</div>
<div class="header-pay">
<a href="#"></a>
</div>
<div class="header-talk">
<a href="#"></a>
</div>
<div class="header-bell">
<a href="#"></a>
</div>
<nav id="nav">
<ul>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-mailImg"></span>
</span>
<span>메일</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-cafeImg"></span>
</span>
<span>카페</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-blogImg"></span>
</span>
<span>블로그</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-shoppingImg"></span>
</span>
<span>쇼핑</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-newsImg"></span>
</span>
<span>뉴스</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-financeImg"></span>
</span>
<span>증권</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-landImg"></span>
</span>
<span>부동산</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-mapImg"></span>
</span>
<span>지도</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-webtoonImg"></span>
</span>
<span>웹툰</span>
</a>
</li>
<li>
<a href="#">
<span class="nav-imgBorder">
<span class="nav-imgBox" id="nav-moreImg"></span>
</span>
<span></span>
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main"></main>
<footer id="footer"></footer>
</body>
</html>'WEB' 카테고리의 다른 글
| 병신같은 쿵쿵따 (0) | 2023.09.14 |
|---|---|
| 계산기 만들기 (0) | 2023.09.14 |
| HTML/CSS - NAVER 메인 따라 만들기 - 3. 최상단 버튼 생성 (0) | 2023.08.31 |
| HTML/CSS - NAVER 메인 따라 만들기 - 2.이미지 소스 추출 (0) | 2023.08.31 |
| HTML/CSS - NAVER 메인 따라 만들기 - 1 (0) | 2023.08.22 |
