210901 개발일지

1) 학습한 내용

국내외 사이트 카피캣 네이버 모바일

> 네이버 모바일

<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>
</ul>
</nav>

</div>

.wrapper 
	{overflow-x: hidden;
	overflow-y: auto;
	width: 375px;
	height: 800px;
	background-color: blue;

	margin: 0 auto;}

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

#main-nav ul 
	{overflow-x: auto;
	display: flex;
	align-items: center;

	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;

	color: rgb(141, 223, 183);
	padding: 0 10px;}

<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"></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>
</a>
</li>
</ul>
				
</nav>
			
</header>

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

#header .search-wrap 
	{overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;

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

	margin: 0 auto 24px;}

#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 a 
	{display: block;
	width: 100%;

	text-align: center;}

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

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

#header .header-nav .icon-2 
	{background-color: purple;}

#header .header-nav span 
	{display: block;

	font-size: 11px;
	color: #1e1d23;
	/*margin-top: 5px;*/}

<div id="banner-1">
<div class="banner-wrap">
<img src="https://via.placeholder.com/750x160">
</div>
</div>

#banner-1 
	{background-color: #f4f6f8;}

#banner-1 .banner-wrap 
	{width: 100%;
	margin: 0 auto;}

#banner-1 .banner-wrap img 
	{width: 100%;}

<div id="weather">
			
<div class="container">

<div class="weather-top">
<div class="weather-left">
<img src="https://via.placeholder.com/30x30">
<div class="txt-wrap">
<h3>22° 대전</h3>
<p>미세 <span>보통</span> ・ 초미세 <span>보통</span></p>
</div>
</div>
<div class="weather-right">
<span>내 위치찾기</span>
<i class="icon"></i>
</div>
</div>
<div class="weather-bottom">
<p>
위치 찾기를 눌러 현 위치의 시간대별・주간날씨와<br>
미세먼지 예보를 여기에서 바로 보세요
</p>
</div>
			
</div>

</div>

#weather 
	{background-color: #ffffff;}

#weather .container 
	{padding: 0 20px;}

#weather .weather-top 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	padding: 22px 0 16px;}

#weather .weather-top .weather-left 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;}

#weather .weather-top .weather-left img 
	{width: 30px;
	height: 30px;
	border-radius: 50%;

	margin-right: 15px;}

#weather .weather-top .weather-left .txt-wrap {}

#weather .weather-top .weather-left .txt-wrap h3 
	{font-size: 16px;}

#weather .weather-top .weather-left .txt-wrap p 
	{font-size: 14px;}

#weather .weather-top .weather-left .txt-wrap p span 
	{color: #00d01d;}

#weather .weather-top .weather-right 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;}

#weather .weather-top .weather-right span 
	{font-size: 14px;
	margin-right: 8px;}	

#weather .weather-top .weather-right .icon 
	{display: inline-block;
	width: 20px;
	height: 20px;
	background-color: blue;
	border-radius: 50%;

	color: #767678;}

#weather .weather-bottom 
	{padding: 6px 0 30px;}

#weather .weather-bottom p 
	{color: #767678;
	font-weight: 400;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: -0.5px;

	text-align: center;}

<div id="now">


<h2>NOW.</h2>
<ul>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
<li>
<a href="">
<img src="https://via.placeholder.com/100x138">
<p>Hello Nice to meet you</p>
</a>
</li>
</ul>

<div class="btn-wrap">
<a href="#" class="btn-now">나우 편성표</a>
<a href="#" class="btn-shopping">쇼핑 편성</a>			
</div>

</div>

#now 
	{background-color: #ffffff;
	padding: 20px 0 16px;
	margin-top: 10px;}

#now h2 
	{font-size: 18px;
	font-weight: 700;
	color: red;

	margin-bottom: 14px;
	margin-left: 20px;}

#now ul 
	{overflow-y: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	padding-left: 20px;}

#now ul li 
	{margin-right: 10px;}

#now ul li:last-child 
	{margin-right: 0;}

#now ul li a 
	{color: black;}

#now ul li a img 
	{width: 100px;
	height: 138px;

	border-radius: 5px;}

#now ul li a p 
	{font-size: 14px;
	padding-top: 10px;}

#now .btn-wrap 
	{overflow: hidden;
	width: 335px;
	border-radius: 10px;
	background-color: #f5f8fb;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	margin: 20px 0 auto;}

#now .btn-wrap a 
	{display: block;
	width: 50%;
	height: 44px;
	text-align: center;
	line-height: 44px;

	color: #767678;}

#now .btn-wrap .btn-now {}

#now .btn-wrap .btn-shopping:before 
	{content: "";
	display: block;
	width: 1px;
	height: 14px;

	margin-top: 15px;
	background-color: rgb(125, 127, 133, 0.2);

	vertical-align: top;

	float: left;}

<div id="banner-2">
<div class="banner-wrap">
<img src="https://via.placeholder.com/320x53">
</div>
</div>

<div id="banner-3">
<div class="banner-wrap">
<img src="https://via.placeholder.com/320x75">
</div>
</div>

<div id="banner-4">
<div class="banner-wrap">
<img src="https://via.placeholder.com/1250x370">
</div>
</div>

#banner-2 
	{background-color: #ffffff;
	margin-top: 10px;}

#banner-2 .banner-wrap 
	{width: 320px;
	margin: 0 auto;}

#banner-2 .banner-wrap img 
	{width: 100%;}

#banner-3 
	{background-color: #ffffff;
	margin-top: 10px;}

#banner-3 .banner-wrap 
	{width: 320px;
	margin: 0 auto;}

#banner-3 .banner-wrap img 
	{width: 100%;}

#banner-4 
	{overflow: hidden;
	background-color: #ffffff;
	margin-top: 10px;}

#banner-4 .banner-wrap 
	{width: 100%;
	height: 155px;}

#banner-4 .banner-wrap img 
	{position: relative;

	height: 100%;

	left: 50%;
	transform: translate(-50%);}

<div id="corona">
<div class="container">
<div class="corona-wrap">
<a href="#" class="left-corona">
<img src="https://via.placeholder.com/35">
<div class="txt-wrap">
<h3>코로나19</h3>
<p>국내외 확진 현황
</p>
</div>
</a>
<a href="#" class="right-corona">
<img src="https://via.placeholder.com/35">
<div class="txt-wrap">
<h3>선별진료소</h3>
<p>내주변 진료소 찾기</p>
</div>
</a>
</div>
</div>
</div>

#corona 
	{background-color: #ffffff;
	margin-top: 10px;}

#corona .container 
	{padding: 0 20px;}
    
#corona .corona-wrap 
	{display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;}

#corona .corona-wrap a 
	{position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	padding: 20px 0;}

#corona .corona-wrap a.right-corona 
	{padding-left: 11px;}

#corona .corona-wrap a.right-corona:before 
	{content: "";
	display: block;

	position: absolute;
	width: 1px ;
	height: 42px;
	background-color: #efeff0;

	top: 20px;
	left: 0;}

#corona .corona-wrap img 
	{width: 35px;
	margin-right: 8px;

	border-radius: 50%;}

#corona .corona-wrap .txt-wrap {}

#corona .corona-wrap .txt-wrap h3 
	{font-size: 16px;
	font-weight: 700;

	color: #000000;}

#corona .corona-wrap .txt-wrap p 
	{font-size: 14px;
	font-weight: 400;
	margin-top: 4px;

	color: #000000;}

<div id="ai">
<div class="container">
				
<div class="ai-wrap">

<div class="ai-left">
<img src="https://via.placeholder.com/40">
<div class="txt-wrap">
<p>
더 편리해진 AI 검색 기능 <br>
네이버앱에서 만나보세요.
</p>
</div>
</div>

<div class="ai-right">
<span>앱 사용하기</span>
</div>

</div>

</div>

</div>

#ai 
	{background-color: #ffffff;
	margin-top: 10px;}

#ai .container 
	{padding: 0 20px;}

#ai .ai-wrap 
	{display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	padding: 20px 0;}

#ai .ai-wrap .ai-left 
	{display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;}

#ai .ai-wrap .ai-left img 
	{width: 40px;
	height: 40px;
	border-radius: 8px;

	margin-right: 8px;}

#ai .ai-wrap .ai-left .txt-wrap {}

#ai .ai-wrap .ai-left p 
	{font-size: 15px;
	color: #424242;
	font-weight: 400;}

#ai .ai-wrap .ai-right 
	{display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;}

#ai .ai-wrap .ai-right span 
	{font-size: 14px;
	font-weight: 400;
	color: #03c95b;}

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

내용이 무진장많아서 하는데 조금 고생했다.

3)해결방법 작성

열ㅁ히 들으면서 작성해 나가는 방법으로 해결했다.

4)학습 소감

폰으로보던걸 내가 만들어내니 신기했다
9월도 시작이니 힘내자