210729 개발일지

1) 학습한 내용

국내외 사이트 카피캣 (네이버 뉴스 1편)

> 네이버 뉴스 상단 영역

<div class="news-container">
<div class="news-flex-between">
<nav class="news-header-left">
<ul class="news-flex-start">
<li class="on"><a href="#">뉴스</a></li>
<li><a href="ent.html">TV연예</a></li>
<li><a href="#">스포츠</a></li>
<li><a href="#">뉴스스탠드</a></li>
<li><a href="#">날씨</a></li>
</ul>
</nav>

<div class="news-header-right news-flex-end">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
</div>
</div>
</div>

<nav class="sub-nav">
<div class="news-container">
<div class="news-flex-between">
<ul class="news-flex-start">
<li><a href="#" class="on">뉴스홈</a></li>
<li><a href="#">속보</a></li>
<li><a href="#">정치</a></li>
<li><a href="#">경제</a></li>
</ul>

<div class="news-search-wrap news-flex-between">
<input type="text" placeholder="뉴스 검색">
<button type="button" class="btn-search"></button>
</div>
</div>
</div>
</nav>
</header>

/* 뉴스 메인 */
.news-container 
	{width: 1080px;
	margin: 0 auto;}

.news-flex-between 
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}

.news-flex-start 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;}

.news-flex-end 
	{display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;}

#news-header 
	{background-color: #3f63bf;}

#news-header .news-header-left 
	{padding-top: 17px;
	padding-bottom: 17px;}

#news-header .news-header-left ul li 
	{font-size: 15px;}

#news-header .news-header-left ul li.on 
	{font-size: 20px;}

#news-header .news-header-left ul li a 
	{color: #ffffff;}

#news-header .news-header-left ul li a:before 
	{display: inline-block;
	content: '';
	width: 1px;
	height: 15px;
	background-color: #000;
	opacity: 0.2;
	
	margin: 0 10px;
	vertical-align: -1px;}

#news-header .news-header-left ul li:first-child a:before 
	{content: none;}

#news-header .news-header-right .btn-login 
	{display: block;
	width: 55px;
	height: 25px;
	border: solid 1px #000000;

	line-height: 25px;
	text-align: center;

	color: #ffffff;

	font-size: 12px;

	margin-right: 20px;}

#news-header .news-header-right .btn-menu 
	{width: 55px;
	height: 55px;
	background-color: #3f63bf;
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;}

#news-header .sub-nav 
	{background-color: #ffffff;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #e3e3e3;}

#news-header .sub-nav ul {}

#news-header .sub-nav ul li 
	{width: auto;
	height: 46px;
	margin-right: 16px;}

#news-header .sub-nav ul li a 
	{display: block;
	width: 100%;
	height: 100%;
	border-bottom: solid 2px transparent;

	font-weight: bold;

	line-height: 46px;}

#news-header .sub-nav ul li a .on 
	{border-bottom: solid 2px #3f63bf;
	color: #3f63bf;}

#news-header .sub-nav .news-search-wrap 
	{width: 280px;
	height: 30px;
	border: solid 1px #e1e1e1;
	background-color: #fafafa;}

#news-header .sub-nav .news-search-wrap input 
	{width: calc(100% - 30px);
	height: 100%;
	border: none;

	font-size: 12px;
	color: #888888;
	padding: 3px 9px;}

#news-header .sub-nav .news-search-wrap input:focus 
	{outline: none;}

#news-header .sub-nav .news-search-wrap .btn-search
	{width: 30px;
	height: 100%;
	background-color: blue;	}

<div id="news-headline">
<div class="news-container">
<div class="news-headline-menu-wrap news-flex-between">
<ul class="main-lists news-flex-start">
<li><a href="#">신문 헤드라인</a></li>
<li><a href="#">저녁 방송 뉴스</a></li>
</ul>

<ul class="sub-lists news-flex-end">
<li><a href="#">팩트체크</a></li>
<li><a href="#">언론사 구독</a></li>
<li><a href="#">언론사 뉴스</a></li>
<li><a href="#">라이브러리</a></li>
</ul>
</div>

<ul class="news-headline-lists news-flex-between">
<li>
<a href="#">
<article>
<h3>TV조선 뉴스9</h3>

<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>

<li>
<a href="#">
<article>
<h3>TV조선 뉴스9</h3>

<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>

<li>
<a href="#">
<article>
<h3>TV조선 뉴스9</h3>

<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>

<li>
<a href="#">
<article>
<h3>TV조선 뉴스9</h3>
<div class="image-wrap">
<img src="https://via.placeholder.com/150">
<div class="overlay">
<div class="headline-info news-flex-start">
<i></i>
<div>
											<span>다시보기</span>
											<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
</div>
</div>
</div>
</div>
</article>
</a>
</li>
</ul>

<div class="news-headline-arrows news-flex-end">
<div class="btn-wrap news-flex-start">
<a href="#" class="btn btn-prev"></a>
<a href="#" class="btn btn-next"></a>
</div>
<a href="#" class="btn btn-up"></a>
</div>
</div>
</div>

#news-headline 
	{padding-top: 20px;}

#news-headline .news-container 
	{border-bottom: solid 1px #000000;
	padding-bottom: 12px;}

#news-headline .news-headline-menu-wrap 
	{margin-bottom: 15px;}

#news-headline .news-headline-menu-wrap .main-lists {}

#news-headline .news-headline-menu-wrap .main-lists li 
	{margin-right: 20px;

	font-size: 15px;}

#news-headline .news-headline-menu-wrap .main-lists li a {}


#news-headline .news-headline-menu-wrap .sub-lists {}

#news-headline .news-headline-menu-wrap .sub-lists li 
	{font-size: 12px;}

#news-headline .news-headline-menu-wrap .sub-lists li a {}

#news-headline .news-headline-menu-wrap .sub-lists li a:before 
	{content: '';
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: #e0e0e0;
	margin: 0 5px;

	vertical-align: -1px;}

#news-headline .news-headline-menu-wrap .sub-lists li:first-child a:before 
	{content: none;}

#news-headline .news-headline-lists
	{margin-bottom: 12px;}

#news-headline .news-headline-lists li 
	{width: 255px;
	height: 178px;
	border: solid 1px #ccc;}

#news-headline .news-headline-lists li a 
	{display: block;

	width: 100%;
	height: 100%;}

#news-headline .news-headline-lists li a article 
	{position: relative;
	width: 100%;
	height: 100%;}

#news-headline .news-headline-lists li a article h3 
	{width: 100%;
	height: 44px;
	line-height: 44px;

	text-align: center;}

#news-headline .news-headline-lists li a article .image-wrap 
	{position: relative;
	width: 100%;
	height: 132px;
	background-color: pink;}

#news-headline .news-headline-lists li a article .image-wrap img 
	{position: absolute;
	width: 100%;
	height: 100%;}

#news-headline .news-headline-lists li a article .image-wrap .overlay 
	{position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);}

#news-headline .news-headline-lists li a article .image-wrap .overlay .headline-info 
	{position: absolute;
	width: 100%;
	padding: 15px 20px;

	left: 0;
	bottom: 0;

	color: #ffffff;}

#news-headline .news-headline-lists .headline-info i 
	{display: block;
	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;}

#news-headline .news-headline-lists .headline-info div 
	{width: calc(100% - 38px);}

#news-headline .news-headline-lists .headline-info span 
	{font-size: 13px;
	font-weight: bold;}

#news-headline .news-headline-lists .headline-info p 
	{display: inline;
	font-size: 12px;}

#news-headline .news-headline-arrows {}

#news-headline .news-headline-arrows .btn-wrap 
	{margin-right: 15px;}

#news-headline .news-headline-arrows .btn 
	{display: block;
	width: 24px;
	height: 24px;
	border: solid 1px #dcdddc;}

#news-headline .news-headline-arrows .btn.btn-prev 
	{background-color: yellow;
	border-right: none;}

#news-headline .news-headline-arrows .btn.btn-next 
	{background-color: pink;}

#news-headline .news-headline-arrows .btn.btn-up 
	{background-color: black;}

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

내용이 많다

3)해결방법 작성

그래도 열심히 들어서 작성해나갔다.~

4)학습 소감

내일이 벌써 금요일이다
곧 8월달인데 열심히 한거같다
내일도 힘내자