210804 개발일지

1) 학습한 내용

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

> 네이버 연예 뉴스 오른쪽 영역

<div class="ent-right">

<div class="ent-banner"></div>

<div id="ent-section-10">
					
<div class="title-wrap ent-flex-between">
<h3>많이 본 TV연예 뉴스</h3>
<a href="#" class="more">더보기</a>
</div>

<ol>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
<li>
<a href="#">
<span class="rank">1</span>
<p>동해물과 백두산이 마르고 닳도록</p>
</a>
</li>
</ol>
</div>

#ent-main .ent-right 
	{float: right;
	width: 324px;
	background-color: pink;

	padding-left: 24px;}

#ent-main .ent-right .ent-banner 
	{width: 300px;
	height: 250px;
	background-color: grey;

	border: solid 1px #000000;

	margin-bottom: 30px;}

#ent-main .ent-right #ent-section-10 
	{padding-bottom: 12px;
	border-bottom: solid 1px #e8e8e8;}

#ent-main .ent-right #ent-section-10 .title-wrap 
	{margin-bottom: 8px;}

#ent-main .ent-right #ent-section-10 .title-wrap h3 
	{font-size: 16px;}

#ent-main .ent-right #ent-section-10 .title-wrap a 
	{font-size: 12px;
    color: #999;}

#ent-main .ent-right #ent-section-10 ol {}

#ent-main .ent-right #ent-section-10 ol li 
	{margin-bottom: 10px;}

#ent-main .ent-right #ent-section-10 ol li a {}

#ent-main .ent-right #ent-section-10 ol li .rank 
	{display: inline-block;
	width: 16px;

	font-size: 16px;
	color: #e2458f;

	text-align: center;

	vertical-align: middle;}

#ent-main .ent-right #ent-section-10 ol li p 
	{display: inline-block;
	width: 270px;
	vertical-align: middle;	
	font-size: 12px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;}

<div id="ent-section-11">
					
<ul>
<li>
<a href="#">
<div class="title-wrap ent-flex-between">
<div class="title-left ent-flex-start">
<span class="count">14</span>
<h3>타이틀 1</h3>
</div>
<div class="icon-arrow"></div>
</div>

<div class="article-content ent-flex-between">
<div class="content-left">
<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
<span class="source">스타뉴스</span>
</div>
<img src="https://via.placeholder.com/70">
</div>
</a>
</li>
<li>
<a href="#">
<div class="title-wrap ent-flex-between">
<div class="title-left ent-flex-start">
<span class="count">14</span>
<h3>타이틀 1</h3>
</div>
<div class="icon-arrow"></div>
</div>

<div class="article-content ent-flex-between">
<div class="content-left">
<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
<span class="source">스타뉴스</span>
</div>
<img src="https://via.placeholder.com/70">
</div>
</a>
</li>
<li>
<a href="#">
<div class="title-wrap ent-flex-between">
<div class="title-left ent-flex-start">
<span class="count">14</span>
<h3>타이틀 1</h3>
</div>
<div class="icon-arrow"></div>
</div>

<div class="article-content ent-flex-between">
<div class="content-left">
<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
<span class="source">스타뉴스</span>
</div>
<img src="https://via.placeholder.com/70">
</div>
</a>
</li>
</ul>

<div class="bottom ent-flex-between">
<div class="btn-wrap ent-flex-start">
<button class="btn btn-prev"></button>
<button class="btn btn-next"></button>
</div>
<a href="#" class="more">더보기</a>
</div>

</div>

#ent-section-11 
	{border-bottom: solid 1px #f2f2f2;
	padding-bottom: 24px;}

#ent-section-11 ul 
	{margin-bottom: 12px;}

#ent-section-11 ul li 
	{padding: 14px;
	border-bottom: solid 1px #f2f2f2;}

#ent-section-11 ul a {}

#ent-section-11 ul .title-wrap 
	{margin-bottom: 10px;}

#ent-section-11 ul .title-wrap .title-left {}

#ent-section-11 ul .title-wrap .title-left .count
	{width: 20px;
	height: 15px;
	padding: 2px 4px;
	border: solid 1px #e2458f;

	color: #e2458f;
	font-size: 10px;

	margin-right: 8px;}

#ent-section-11 ul .title-wrap .title-left h3 
	{color: #e2458f;
	font-size: 12px;}

#ent-section-11 ul .title-wrap .icon-arrow 
	{width: 8px;
	height: 12px;
	background-color: #e2458f;}

#ent-section-11 ul .article-content {}

#ent-section-11 ul .article-content .content-left 
	{width: 190px;}

#ent-section-11 ul .article-content .content-left h4 
	{font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	margin-bottom: 6px;}

#ent-section-11 ul .article-content .content-left .source 
	{font-size: 11px;
	color: #a6a6a6;}

#ent-section-11 ul .article-content img 
	{width: 70px;
	height: 70px;
	border: solid 1px #000000;}

#ent-section-11 .bottom .btn-wrap {}

#ent-section-11 .bottom .btn-wrap .btn 
	{width: 24px;
	height: 24px;
	border: solid 1px #f2f2f2;}

#ent-section-11 .bottom .btn-wrap .btn-prev 
	{background-color: grey;
	border-right: none;}

#ent-section-11 .bottom .btn-wrap .btn-next 
	{background-color: yellow;}

#ent-section-11 .bottom .more 
	{font-size: 12px;
	color: #999;}

<div id="ent-section-12">
<div class="title-wrap">
<h3>연예가 HOT 포토</h3>
</div>

<ul class="ent-flex-between">
<li>
<img src="https://via.placeholder.com/146x138">
<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
<span>스타들의 일상</span>
</li>
<li>
<img src="https://via.placeholder.com/146x138">
<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
<span>스타들의 일상</span>
</li>
<li>
<img src="https://via.placeholder.com/146x138">
<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
<span>스타들의 일상</span>
</li>
<li>
<img src="https://via.placeholder.com/146x138">
<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
<span>스타들의 일상</span>
</li>
</ul>
</div>

#ent-section-12 
	{padding: 20px 0 2px;
	border-bottom: solid 1px #e8e8e8;}

#ent-section-12 .title-wrap 
	{margin-bottom: 12px;}

#ent-section-12 .title-wrap h3 
	{font-size: 16px;}

#ent-section-12 ul {}

#ent-section-12 li 
	{width: 146px;
	margin-bottom: 19px;}

#ent-section-12 li img 
	{width: 100%;
	height: 138px;
	border: solid 1px #000000;
	margin-bottom: 9px;}

#ent-section-12 li h4 
	{font-size: 12px;
	font-weight: 700;
	line-height: 18px;

	margin-bottom: 5px;}

#ent-section-12 li span 
	{font-size: 11px;
	color: #898989;}

<div id="ent-section-13">
<div class="title-wrap ent-flex-between">
<h3>연예가 인터뷰</h3>
<a href="#" class="more">더보기</a>
</div>

<div class="heading ent-flex-between">
						
<div class="heading-info">
<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
<span class="source">스포츠</span>
</div>
						
<img src="https://via.placeholder.com/70">
</div>

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

#ent-section-13 
	{padding-top: 22px;}

#ent-section-13 .title-wrap 
	{margin-bottom: 8px;}

#ent-section-13 .title-wrap h3 
	{font-size: 16px;}

#ent-section-13 .title-wrap .more 
	{font-size: 12px;
    color: #999;}

#ent-section-13 .heading 
	{margin-bottom: 8px;}

#ent-section-13 .heading .heading-info 
	{width: 210px;}

#ent-section-13 .heading h4 
	{font-size: 12px;
	font-weight: 700;
	line-height: 18px;}

#ent-section-13 .heading .source
	{font-size: 11px;
    color: #999;}

#ent-section-13 .heading img 
	{width: 70px;
	height: 70px;
	border: solid 1px #000000;}

#ent-section-13 ul {}

#ent-section-13 ul li 
	{margin-bottom: 8px;}

#ent-section-13 ul a 
	{display: block;
	width: 100%;
	font-size: 12px;
	color: #222;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;}

#ent-section-13 ul a:before 
	{display: inline-block;
	content: '';
	width: 2px;
	height: 2px;

	vertical-align: top;
	background-color: silver;

	margin: 5px 5px 0 0;}

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

내용이 오늘은 적어서 좋았다. 조금 편히 했다.!

3)해결방법 작성

적어도 열심히 들으면서 했다

4)학습 소감

내용이 평소보다 적어서 여유롭게 했다.!
매일 적게해고 싶지만 안되겠지 .. ㅎ
화이팅