학습한 내용
html - ent
추천 뉴스
<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="https://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="https://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="https://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="https://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="https://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="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/55x55">
<h4>모범택시</h4>
</a>
</li>
<li>
<a href="#">
<img src="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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 1Title 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 1Title 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 1Title 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 1Title 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 class="ent-flex-start">
<li><a href="#" class="on">연예뉴스</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="#" class="ent-flex-start">
<span class="rank">1</span>
<div class="news-info-wrap ent-flex-between">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="https://via.placeholder.com/88x88">
</div>
</a>
</li>
<li>
<a href="#" class="ent-flex-start">
<span class="rank">1</span>
<div class="news-info-wrap ent-flex-between">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="https://via.placeholder.com/88x88">
</div>
</a>
</li>
<li>
<a href="#" class="ent-flex-start">
<span class="rank">1</span>
<div class="news-info-wrap ent-flex-between">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="https://via.placeholder.com/88x88">
</div>
</a>
</li>
<li>
<a href="#" class="ent-flex-start">
<span class="rank">1</span>
<div class="news-info-wrap ent-flex-between">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="https://via.placeholder.com/88x88">
</div>
</a>
</li>
<li>
<a href="#" class="ent-flex-start">
<span class="rank">1</span>
<div class="news-info-wrap ent-flex-between">
<div class="news-info-txt">
<h4>Title</h4>
<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
<span>헤럴드 POP</span>
</div>
<img src="https://via.placeholder.com/88x88">
</div>
</a>
</li>
</ol>
</div>
<div id="ent-section-9">
<div class="title-wrap ent-flex-between">
<h3>기자추천 연재코너</h3>
<a href="#" class="more">더보기</a>
</div>
<ul class="ent-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt-wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt-wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<div class="txt-wrap">
<span class="program">SW시선</span>
<span class="source">스포츠월드</span>
<h4>Title 1 Title 1 Title 1 Title 1</h4>
</div>
</a>
</li>
</ul>
</div>CSS
#ent-main .ent-left #ent-section-4 {
padding: 23px 0;
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;
background-color: #ffffff;
border: solid 1px #e8e8e8;
line-height: 40px;
text-align: center;
color: #444;}
#ent-main .ent-left #ent-section-5 {
padding: 24px 0 14px;
border-bottom: solid 1px #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 {
display: block;
width: 100%;
height: 100%;
text-align: center;}
#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 h4 {
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 {
position: absolute;
display: block;
width: 28px;
height: 28px;
background-color: grey;
border-radius: 50%;
left: 8px;
bottom: 7px;}
#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 {
display: inline-block;
max-width: 363px;
margin-right: 5px;
vertical-align: top;
font-size: 14px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}
#ent-main .ent-left #ent-section-7 .movie-wrap .right span {
vertical-align: top;
font-size: 11px;
color: #898989;}
#ent-main .ent-left #ent-section-8 .title-wrap {
}
#ent-main .ent-left #ent-section-8 .title-wrap div {
align-items: flex-start;
}
#ent-main .ent-left #ent-section-8 .title-wrap h3 {
font-size: 16px;
}
#ent-main .ent-left #ent-section-8 .title-wrap ul {
position: relative;
top: -4px;
margin-left: 19px;
}
#ent-main .ent-left #ent-section-8 .title-wrap li {
}
#ent-main .ent-left #ent-section-8 .title-wrap li a {
font-size: 12px;
color: #181818;
}
#ent-main .ent-left #ent-section-8 .title-wrap li a:before {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background-color: #e8e8e8;
margin: 0 10px;
vertical-align: -1px;}
#ent-main .ent-left #ent-section-8 .title-wrap li:first-child a:before {
content: none;
}
#ent-main .ent-left #ent-section-8 .title-wrap li a.on {
font-weight: 700;
color: #e2458f;
border-bottom: solid 1px #e2458f;
}
#ent-main .ent-left #ent-section-8 .title-wrap .more {
font-size: 12px;
color: #999;
}
#ent-main .ent-left #ent-section-8 .news-lists {
}
#ent-main .ent-left #ent-section-8 .news-lists li {
padding: 18px 0;
border-bottom: solid 1px #f1f1f1;
}
#ent-main .ent-left #ent-section-8 .news-lists a {
/display: block;/
}
#ent-main .ent-left #ent-section-8 .news-lists .rank{
display: block;
width: 40px;
text-align: center;
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap{
width: calc(100% - 40px);
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt{
width: 486px;
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 9px;
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt p{
font-size: 12px;
font-weight: 400;
color: #898989;
margin-bottom: 8px
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt span {
font-size: 11px;
color: #898989;
}
#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap img{
width: 88px;
height: 88px;
}
#ent-main .ent-left #ent-section-9 {
padding: 24px 0 20px;
border-bottom: solid 1px #e4e4e4;
}
#ent-main .ent-left #ent-section-9 .title-wrap {
margin-bottom: 17px;
}
#ent-main .ent-left #ent-section-9 .title-wrap h3 {
font-size: 16px;
}
#ent-main .ent-left #ent-section-9 .title-wrap a {
font-size: 12px;
color: #999;
}
#ent-main .ent-left #ent-section-9 ul {
}
#ent-main .ent-left #ent-section-9 li {
width: 200px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-9 a {
display: block;
}
#ent-main .ent-left #ent-section-9 li img {
width: 100%;
height: 122px;
}
#ent-main .ent-left #ent-section-9 li .txt-wrap {
padding: 13px 14px 18px;
}
#ent-main .ent-left #ent-section-9 li span {
font-size: 11px;
}
#ent-main .ent-left #ent-section-9 li .program {
color: #ff0080
}
#ent-main .ent-left #ent-section-9 li .program: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-9 li .source {
color: #999;
}
#ent-main .ent-left #ent-section-9 li h4 {
padding-top: 8px;
font-size: 12px;
font-weight: 700;
line-height: 20px;
min-height: 36px;}
결과물
학습내용 중 어려웠던 점
오늘은 빠른 시간내에 많은 것을 했는데 코드를 왔다갔다 수정하느라 헷갈렸다.
해결방법
강의 멈추고 계속 수정하면서 봤다.
학습소감
세상에 이렇게도 다양한 페이지가 있고, 이 페이지 하나를 위해 엄청나게 많은 코드를 입력해야되구나라고 느꼈다.
