학습한 내용
<div id="ent-section-3">
<div class="title-wrap ent-flex-between">
<h3>스타 콘텐츠</h3>
<div class="right-wrap ent-flex-end">
<div class="count-wrap">
<span><em>1</em> / 2</span>
</div>
<div class="btn-wrap ent-flex-end">
<button class="btn btn-prev"></button>
<button class="btn btn-next"></button>
</div>
</div>
</div>
<ul class="ent-flex-between">
<li>
<a href="#">
<img src="http://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/148x148">
<span>에이치앤드 안녕하세요 반갑습니다 깔깔깔깔깔</span>
<h3>[금새록] 오월의 새 [금새록] 오월의 새록</h3>
</a>
</li>
</ul>
</div>
<div id="ent-section-4">
<div class="title-wrap">
<h3>추천뉴스</h3>
</div>
<ul>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
</ul>
<button class="btn-more">새로운 뉴스 가져오기</button>
</div>
<div id="ent-section-5">
<div class="title-wrap ent-flex-between">
<h3>오늘의 프로그램</h3>
<a href="#">더보기</a>
</div>
<ul>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
</ul>
</div>
<div id="ent-section-6">
<div class="title-wrap ent-flex-between">
<h3>TV 프로그램 구독</h3>
<a href="#">더보기</a>
</div>
<ul class="ent-flex-between">
<li>
<a href="#">
<div class="img-wrap">
<img src="http://via.placeholder.com/148x85">
<i class="icon-play"></i>
</div>
<h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </h4>
</a>
<a href="#">
<span class="source">KBS2</span>
<span class="program">미스 몬테크리스트</span>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="http://via.placeholder.com/148x85">
<i class="icon-play"></i>
</div>
<h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </h4>
</a>
<a href="#">
<span class="source">KBS2</span>
<span class="program">미스 몬테크리스트</span>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="http://via.placeholder.com/148x85">
<i class="icon-play"></i>
</div>
<h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </h4>
</a>
<a href="#">
<span class="source">KBS2</span>
<span class="program">미스 몬테크리스트</span>
</a>
</li>
<li>
<a href="#">
<div class="img-wrap">
<img src="http://via.placeholder.com/148x85">
<i class="icon-play"></i>
</div>
<h4>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 </h4>
</a>
<a href="#">
<span class="source">KBS2</span>
<span class="program">미스 몬테크리스트</span>
</a>
</li>
</ul>
</div>
<div id="ent-section-4">
<ul>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<div class="ent-info">
<h3>Title 1 Title 1 Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span class="source">스포츠둥이</span>
</div>
<img src="http://via.placeholder.com/88x88">
</a>
</li>
</ul>
<button class="btn-more">새로운 뉴스 가져오기</button>
</div>
<div id="ent-section-7">
<div class="title-wrap ent-flex-between">
<h3>영화계는 지금</h3>
<a href="#">더보기</a>
</div>
<div class="movie-wrap ent-flex-start">
<div class="left">
<a href="#">
<img src="http://via.placeholder.com/200x122">
<h4>Title1</h4>
</a>
</div>
<div class="right">
<ul>
<li>
<a href="#">Title 1</a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 </a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 </a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 </a>
<span>스타뉴스</span>
</li>
<li>
<a href="#">Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 Title 1 </a>
<span>스타뉴스</span>
</li>
</ul>
</div>
</div>
</div>
<div id="ent-section-8">
<div class="title-wrap ent-flex-between">
<div class="ent-flex-start">
<h3>많이 본 연예정보</h3>
<ul>
<li><a href="#">연예뉴스</a></li>
<li><a href="#">영상</a></li>
<li><a href="#">뮤직</a></li>
<li><a href="#">V LIVE</a></li>
</ul>
</div>
<a href="#" class="more">더보기</a>
</div>
<ol class="news-lists">
<li>
<a href="#">
<span>1</span>
<div class="news-info-wrap">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="http://via.placeholder.com/88x88">
</div>
</a>
</li>
</ol>
</div>
</div>
<div class="ent-right"></div>
</div>
</main>#ent-main .ent-left #ent-section-3{
padding: 24px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent-main .ent-left #ent-section-3 .title-wrap{
margin-bottom: 18px;
}
#ent-main .ent-left #ent-section-3 .title-wrap h3{
font-size: 16px;
}
#ent-main .ent-left #ent-section-3 .right-wrap{
}
#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap{
}
#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span{
font-size: 12px;
color: #666;
}
#ent-main .ent-left #ent-section-3 .right-wrap span em{
font-style: normal;
color: #ff0080;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap{
margin-left: 8px;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn{
width: 24px;
height: 24px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-prev{
border-right: none;
background-color: blue;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-next{
background-color: green;
}
#ent-main .ent-left #ent-section-3 ul{
}
#ent-main .ent-left #ent-section-3 li{
width: 148px;
height: 148px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-3 li a{
width: 100%;
height: 100%;
position: relative;
display: block;
}
#ent-main .ent-left #ent-section-3 li img{
position: absolute;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-section-3 li span{
position: absolute;
left: 0;
top: 0;
background-color: #f40080;
max-width: 100%;
display: block;
font-size: 11px;
font-weight: 700;
padding: 0 5px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ent-main .ent-left #ent-section-3 li h3{
position: absolute;
width: 100%;
left: 0;
bottom: 0;
min-height: 32px;
padding: 9px 10px 8px;
background-color: rgba(0, 0, 0, 0.4);
font-size: 12px;
font-weight: 700px;
color: #ffffff;
}
#ent-main .ent-left #ent-section-4{
padding: 23px 0px;
border-bottom: solid 1px #e4e4e4;
}
#ent-main .ent-left #ent-section-4 .title-wrap{
/*margin-bottom: 18px;*/
}
#ent-main .ent-left #ent-section-4 .title-wrap h3{
font-size: 16px;
}
#ent-main .ent-left #ent-section-4 ul{
}
#ent-main .ent-left #ent-section-4 li{
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent-main .ent-left #ent-section-4 li:last-child{
border-bottom: none;
}
#ent-main .ent-left #ent-section-4 a{
}
#ent-main .ent-left #ent-section-4 .ent-info{
width: 528px;
}
#ent-main .ent-left #ent-section-4 .ent-info h3{
font-size: 14px;
font-weight: 700;
margin-bottom: 7px;
}
#ent-main .ent-left #ent-section-4 .ent-info p{
font-size: 12px;
font-weight: 400;
line-height: 20px;
color: #898989;
margin-bottom: 9px;
}
#ent-main .ent-left #ent-section-4 .ent-info .source{
font-size: 11px;
font-weight: 400;
color: #a7a7a7;
}
#ent-main .ent-left #ent-section-4 li img{
width: 88px;
height: 88px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-4 .btn-more{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #444;
border: solid 1px #e8e8e8;
background-color: #ffffff;
}
#ent-main .ent-left #ent-section-5{
padding: 24px 0 14px;
border-bottom: #e4e4e4;
}
#ent-main .ent-left #ent-section-5 .title-wrap{
margin-bottom: 20px;
}
#ent-main .ent-left #ent-section-5 .title-wrap h3{
font-size: 16px;
}
#ent-main .ent-left #ent-section-5 .title-wrap a{
font-size: 12px;
color: #999;
}
#ent-main .ent-left #ent-section-5 ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
#ent-main .ent-left #ent-section-5 li{
}
#ent-main .ent-left #ent-section-5 li a{
text-align: center;
display: block;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-section-5 li img{
width: 55px;
height: 55px;
border-radius: 50%;
margin-bottom: 10px;
}
#ent-main .ent-left #ent-section-5 li h3{
font-size: 12px;
font-weight: 700;
line-height: 16px;
}
#ent-main .ent-left #ent-section-6{
padding: 24px 0;
border-bottom: solid 1px #e4e4e4;
}
#ent-main .ent-left #ent-section-6 .title-wrap{
margin-bottom: 17px;
}
#ent-main .ent-left #ent-section-6 .title-wrap h3{
font-size: 16px;
}
#ent-main .ent-left #ent-section-6 .title-wrap a{
font-size: 12px;
color: #999;
}
#ent-main .ent-left #ent-section-6 ul{
}
#ent-main .ent-left #ent-section-6 li{
width: 148px;
}
#ent-main .ent-left #ent-section-6 ul .img-wrap{
position: relative;
width: 148px;
height: 85px;
border: solid 1px #000000;
margin-bottom: 10px;
}
#ent-main .ent-left #ent-section-6 ul .img-wrap img{
position: absolute;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-section-6 ul .img-wrap .icon-play{
width: 28px;
height: 28px;
background-color: dimgray;
border-radius: 50%;
left: 8px;
bottom: 7px;
position: absolute;
display: block;
}
#ent-main .ent-left #ent-section-6 ul h4{
font-size: 12px;
margin-bottom: 8px;
}
#ent-main .ent-left #ent-section-6 ul span{
font-size: 11px;
color: #141414;
}
#ent-main .ent-left #ent-section-6 ul .source{
color: #999;
}
#ent-main .ent-left #ent-section-6 ul .source:after{
content: '';
display: inline-block;
width: 2px;
height: 2px;
background-color: #d3d3d3;
vertical-align: top;
margin: 9px 2px 0 4px;
}
#ent-main .ent-left #ent-section-6 ul .program:after{
content: '';
display: inline-block;
width: 5px;
height: 5px;
background-color: red;
vertical-align: top;
margin: 7px 2px 0 4px;
}
#ent-main .ent-left #ent-section-7{
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent-main .ent-left #ent-section-7 .title-wrap{
margin-bottom: 17px;
}
#ent-main .ent-left #ent-section-7 .title-wrap h3{
font-size: 16px;
}
#ent-main .ent-left #ent-section-7 .title-wrap a{
font-size: 12px;
color: #999;
}
#ent-main .ent-left #ent-section-7 .movie-wrap{
align-items: stretch;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .left{
}
#ent-main .ent-left #ent-section-7 .movie-wrap .left img{
width: 200px;
height: 122px;
margin-bottom: 11px;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .left h4{
font-size: 12px;
font-weight: 700;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right{
width: 412px;
margin-left: 18px;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right ul{
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right li{
margin-bottom: 10px;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right li:last-child{
margin-bottom: 0;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right a{
max-width: 350px;
font-size: 14px;
font-weight: 700;
margin-right: 5px;
vertical-align: top;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#ent-main .ent-left #ent-section-7 .movie-wrap .right span{
font-size: 11px;
color: #898989;
vertical-align: top;
}
#ent-main .ent-left #ent-section-8 .title-wrap{
}
#ent-main .ent-left #ent-section-8 .title-wrap
학습내용 중 어려웠던 점
없었다.
해결 방법
없었다!!
학습소감
네이버 사이트들을 하다보니 재미있다.
hello