Day 48. 네이버 모바일 1

SUN·2021년 9월 1일

자습

1. 학습 내용

네이버 모바일 목록, 검색창, 검색창 아래 목록

HTML

<div class="wrapper">
	
	<nav id="main-nav">
		<ul>
			<li><a href="#">홈</a></li>
			<li><a href="#">뉴스</a></li>
			<li><a href="#">스포츠</a></li>
			<li><a href="#">연예</a></li>
			<li><a href="#">쇼핑</a></li>
			<li><a href="#">경제지표</a></li>
			<li><a href="#">책방</a></li>
			<li><a href="#">리빙</a></li>
			<li><a href="#">뭐하지</a></li>
		</ul>
		
	</nav>

	<header id="header">
		
		<div class="search-wrap">
			<a href="#" class="link-logo"></a>
			<input type="text" placeholder="검색어를 입력해주세요">
			<a href="#" class="link-voice"></a>
		</div>

		<nav class="header-nav">
			<ul>
				<li>
					<a href="#">
						<i class="icon icon-1"></i>
						<span>뉴스판</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon icon-2"></i>
						<span>쇼핑판</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon icon-3"></i>
						<span>경제지표판</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon"></i>
						<span>스포츠판</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon"></i>
						<span>메일</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon"></i>
						<span>카페</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon"></i>
						<span>블로그</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon"></i>
						<span></span>
					</a>
				</li>
			</ul>
		</nav>

	</header>

</div>

CSS

.wrapper {
	width: 375px;
	height: 100vh;
	/* 항상 화면의 100%의 높이값을 유지 */
	background-color: blueviolet;

	margin: 0 auto;

	overflow-x: hidden;
	overflow-y: auto;
	/*x축으로 넘어가는 것은 감추고 y축으로 스크롤 생성*/}

#main-nav {
	background-color: rgb(7, 189, 120);
	overflow: hidden;
	border-top: solid 1px #000000;}

#main-nav ul {
	display: flex;
	justify-content: flex-start;
	align-items: center;

	overflow-x: auto;
    /* x축으로 스크롤 생성 */
	white-space: nowrap;
	/* 줄바꿈 방지 */}

/*
#main-nav ul {
	-ms-overflow-style: none;
	scrollbar-width: none;}

#main-nav ul::-webkit-scrollbar {
	display: none;}

크롬, 사파리, 오페라의 브라우저에서 사용 - 스크롤 바를 없애준다. */

#main-nav ul li {
	height: 54px;
	text-align: center;}

#main-nav ul li a {
	height: 100%;
	line-height: 54px;
	padding: 0 10px;

	color: rgb(141, 223, 183);}

#header {
	background-color: #f4f6f8;
	padding: 120px 0 80px;}

#header .search-wrap {
	position: relative;
	overflow: hidden;
	width: 333px;

	background-color: #ffffff;
	border: solid 1px rgb(7, 189, 120);
	border-radius: 10px;

	margin: 0 auto 24px;
    - 가운데 정렬과 아래쪽 공간을 줌

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;}

#header .search-wrap .link-logo {
	display: block;
	width: 42px;
	height: 42px;
	background-color: green;}

#header .search-wrap input {
	width: calc(100% - 78px);
	height: 22px;

	font-size: 18px;

	padding: 0 20px;}

#header .search-wrap .link-voice {
	display: block;
	width: 36px;
	height: 36px;
	background-color: green;}

#header .header-nav {
	width: 316px;
	margin: 0 auto;}

#header .header-nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	width: 100%;}

#header .header-nav li {
	width: 25%;
	padding-top: 12px;}

#header .header-nav li a {
	display: block;
	width: 100%;

	text-align: center;}

#header .header-nav li a .icon {
	display: inline-block;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background-color: #ffffff;
	border: solid 1px grey;}

#header .header-nav li a .icon-1 {
	background-color: blue;}

#header .header-nav li a .icon-2 {
	background-color: yellow;}

#header .header-nav li a span {
	display: block;
	font-size: 11px;
	color: #1e1e23;}