개발일지 20일차
학습 내용
- 네이버 연예뉴스 상단 / 왼쪽
ent.html
<header id="ent-header">
<div class="ent-flex-between">
<div class="ent-header-left">
<ul class="ent-flex-start">
<li><a href="#">TV연예</a></li>
<li><a href="news.html">뉴스</a></li>
</ul>
</div>
<div class="ent-header-center">
<ul class="ent-flex-center">
<li class="on"><a href="#">TV연예홈</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">포토</a></li>
<li><a href="#">랭킹</a></li>
<li><a href="#">영화</a></li>
<li><a href="#">최신뉴스</a></li>
</ul>
</div>
<div class="ent-header-right ent-flex-end">
<a href="#" class="btn-login">로그인</a>
<button type="button" class="btn-menu"></button>
<button type="button" class="btn-search"></button>
</div>
</div>
</header>
<main role="main" id="ent-main">
<div class="ent-container">
<div class="ent-left">
<div id="ent-media-headline">
<ul class="ent-flex-between">
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:02</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[신곡 MV] BTS (방탄소년단)......</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:02</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[신곡 MV] BTS (방탄소년단)......</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:02</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[신곡 MV] BTS (방탄소년단)......</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:02</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[신곡 MV] BTS (방탄소년단)......</p>
</div>
</a>
</li>
</ul>
</div>
<div id="ent-section-1">
<ul>
<li>
<a href="#" class="ent-flex-between">
<img src="https://via.placeholder.com/148x90">
<div class="ent-news-wrap">
<h3>Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p>
<div class="bottom-wrap ent-flex-between">
<span class="source">TV리포트</span>
<span class="count">9</span>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="ent-flex-between">
<img src="https://via.placeholder.com/148x90">
<div class="ent-news-wrap">
<h3>Title 1</h3>
<p>동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p>
<div class="bottom-wrap ent-flex-between">
<span class="source">TV리포트</span>
<span class="count">9</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div id="ent-section-2">
<ul class="ent-flex-between">
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">TV리포트</span>
<span class="count">1</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">TV리포트</span>
<span class="count">1</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">TV리포트</span>
<span class="count">1</span>
</div>
</a>
</li>
</ul>
</div>
<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="https://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 5월의 새록 5월의 새록 5월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 5월의 새록 5월의 새록 5월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 5월의 새록 5월의 새록 5월의 새록</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>에이치앤드</span>
<h3>[금새록] 5월의 새록 5월의 새록 5월의 새록</h3>
</a>
</li>
</ul>
</div>
</div>
</main>
style.css
/* ent.html 영역 */ .ent-container { width: 980px; margin: 0 auto; } .ent-flex-start { display: flex; flex-wrap: wrap; align-items: center; } .ent-flex-center { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .ent-flex-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .ent-flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .ent-border { border: solid 1px #000000; } #ent-header { width: 100%; height: 62px; background-color: #ffffff; border-bottom: solid 2px #f1f1f1; padding: 20px 25px 0; } #ent-header .ent-header-left ul { } #ent-header .ent-header-left ul li { font-weight: 700; } #ent-header .ent-header-left ul li a { } #ent-header .ent-header-left ul li:last-child a { color: #9f9f9f; } #ent-header .ent-header-left ul li a:before { content: ''; display: inline-block; width: 1px; height: 12px; background-color: #dddddd; margin: 0 8px; vertical-align: -1px; } #ent-header .ent-header-left ul li:first-child a:before { content: none; } #ent-header .ent-header-center li { font-weight: 700; font-size: 16px; padding: 0 15px; } #ent-header .ent-header-center li a { display: inline-block; border-bottom: solid 2px #ffffff; padding-bottom: 2px; } #ent-header .ent-header-center li.on { } #ent-header .ent-header-center li.on a { border-bottom: solid 2px #e24587; color: #e24587; } /* 마진병합현상에서 큰 값이 작은 값을 병합시킨다. 하지만 */ /* 형제지간의 마진병합현상에서 bottom,top에서만 일어나고 left,right에서 */ /* 는 일어나지 않는다. */ #ent-header .ent-header-right .btn-login { width: 45px; height: 20px; border: solid 1px #000000; font-size: 12px; line-height: 20px; text-align: center; margin: 0 9px; } #ent-header .ent-header-right .btn-menu { width: 16px; height: 16px; background-color: grey; margin: 0 9px; } #ent-header .ent-header-right .btn-search { width: 25px; height: 25px; background-color: #000000; margin-left: 9px; } #ent-main { } /* 자식의 높이값을 부모에게 적용 */ #ent-main .ent-container { overflow: hidden; } #ent-main .ent-left { float: left; width: 654px; height: 2000px; background-color: yellow; padding-right: 24px; } #ent-main .ent-left #ent-media-headline { padding-bottom: 20px; border-bottom: solid 1px #f1f1f1; } #ent-main .ent-left #ent-media-headline ul { } #ent-main .ent-left #ent-media-headline li { width: 149px; height: 204px; border-radius: 10px; } #ent-main .ent-left #ent-media-headline a { display: block; width: 100%; height: 100%; } #ent-main .ent-left #ent-media-headline .media-top { position: relative; height: 144px; } #ent-main .ent-left #ent-media-headline .media-top img { position: absolute; width: 100%; height: 100%; } #ent-main .ent-left #ent-media-headline .media-top .time { position: absolute; display: block; height: 16px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.56); padding: 0 4px; right: 8px; top: 8px; color: #ffffff; font-size: 11px; line-height: 16px; } #ent-main .ent-left #ent-media-headline .media-top .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-media-headline .media-bottom { height: 60px; background-color: #444a60; } /* letter-spacing : 글자간 좌우간격 조정 */ #ent-main .ent-left #ent-media-headline .media-bottom p { font-size: 14px; font-weight: 700; letter-spacing: -1px; padding: 11px 12px 0; color: #ffffff; } #ent-main .ent-left #ent-section-1 { } #ent-main .ent-left #ent-section-1 li { border-bottom: solid 1px #f1f1f1; padding: 20px 0; } #ent-main .ent-left #ent-section-1 li a { } #ent-main .ent-left #ent-section-1 li img { width: 140px; height: 90px; border: solid 1px #000000; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap { width: 462px; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap h3 { margin-bottom: 8px; font-size: 14px; font-weight: 700; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap p { margin-bottom: 8px; font-size: 12px; color: #898989; font-weight: 400; line-height: 20px; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap { } #ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .source, #ent-main .ent-left #ent-section-2 .ent-bottom .source { font-size: 11px; font-weight: 400; color: #a7a7a7; } #ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .count, #ent-main .ent-left #ent-section-2 .ent-bottom .count { display: inline-block; width: 20px; height: 20px; border: solid 1px #000000; border-radius: 5px; text-align: center; line-height: 20px; font-size: 10px; } #ent-main .ent-left #ent-section-2 { border-bottom: solid 1px #f1f1f1; padding: 20px 0; } #ent-main .ent-left #ent-section-2 ul { } #ent-main .ent-left #ent-section-2 li { width: 200px; } #ent-main .ent-left #ent-section-2 a { } #ent-main .ent-left #ent-section-2 img { width: 200px; height: 122px; border: solid 1px #000000; margin-bottom: 15px; } #ent-main .ent-left #ent-section-2 h3 { font-size: 13px; line-height: 20px; margin-bottom: 9px; } #ent-main .ent-left #ent-section-2 .ent-bottom { } #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 .count-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 { background-color: blue; border-right: none; } #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 { position: relative; display: block; width: 100%; height: 100%; } #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; display: block; max-width: 100%; left: 0; top: 0; background-color: #f40080; padding: 0 5px; font-size: 11px; font-weight: 700; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #ent-main .ent-left #ent-section-3 li h3 { position: absolute; width: 100%; min-height: 32px; left: 0; bottom: 0; padding: 9px 10px 8px; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; font-size: 12px; font-weight: 700; }
결과
학습한 내용 중 어려웠던 점 또는 해결하지 못한 것들
position을 이용하여 레이어를 여러번 겹치는 구간이 코드 분량이 길어 조금 어려웠다.
해결한 방법
강의를 2번 보고 복습하였다.
학습 소감
이해가 어느 정도되서 뜻 깊었다.
Author And Source
이 문제에 관하여(개발일지 20일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hijaekyeoung/개발일지-20일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)