2021.08. 02CSS실습(17)
ent.html✍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버 TV연예</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<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>
<li><a href="#">TOKYO 2020</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:04</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[tvN 악마판사]"너 원래 하녀...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:04</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[tvN 악마판사]"너 원래 하녀...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:04</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[tvN 악마판사]"너 원래 하녀...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media-top">
<img src="https://via.placeholder.com/148x145">
<span class="time">03:04</span>
<i class="icon-play"></i>
</div>
<div class="media-bottom">
<p>[tvN 악마판사]"너 원래 하녀...</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>배우 신현빈이 '재벌집 막내아들' 출연을 확정 지었다. JTBC 새 드라마 '재벌집 막내아들'(김태희 극본,
정대윤 연출)은 동명의 웹 소설을 원작으로, 재벌 총수 일가의 오너리스크…</p>
<div class="bottom-wrap ent-flex-between">
<span class="source">스포츠조선</span>
<span class="count">17</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 2</h3>
<p>가수 전소미의 신곡이 드디어 베일을 벗는다. 전소미는 2일 오후 6시 각종 온라인 음원사이트를 통해
신곡 '덤덤(DUMB DUMB)'을 발매한다. '덤덤(DUMB DUMB)'은 미니…</p>
<div class="bottom-wrap ent-flex-between">
<span class="source">스포츠조선</span>
<span class="count">17</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>Long Title 1 Long Title 1 Long Title 1 Long Title 1</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">스타뉴스</span>
<span class="count">13</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<h3>Long Title 2 Long Title 2 Long Title 2 Long Title 2</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">스타뉴스</span>
<span class="count">13</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/200x122">
<h3>Long Title 3 Long Title 3 Long Title 3 Long Title 3</h3>
<div class="ent-bottom ent-flex-between">
<span class="source">스타뉴스</span>
<span class="count">13</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 type="button" class="btn btn-prev"></button>
<button type="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>ACE FACTORY</span>
<h3>소속사가 자랑하는 연기 천재</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>ACE FACTORY</span>
<h3>소속사가 자랑하는 연기 천재</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>ACE FACTORY</span>
<h3>소속사가 자랑하는 연기 천재</h3>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/148x148">
<span>ACE FACTORY</span>
<h3>소속사가 자랑하는 연기 천재</h3>
</a>
</li>
</ul>
</div>
</div>
<div class="ent-right">
</div>
</div>
</main>
</body>
</html>
ent.css✍
.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;
}
.end-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 {
color: #e24587;
border-bottom: solid 2px #e24587;
}
#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;*/
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: 148px;
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, .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;
}
#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: 148px;
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-2 .ent-bottom .source {
}
#ent-main .ent-left #ent-section-2 .ent-bottom .count {
}
#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 {
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 {
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%;
background-color: #f40080;
padding: 0 5px;
left: 0;
top: 0;
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;
background-color: rgba(0, 0, 0, 0.3);
padding: 9px 10px 8px;
left: 0;
bottom: 0;
color: #ffffff;
font-size: 12px;
font-weight: 700;
}
🚀 결과
🚀 어려웠던 점
처음 상단부분에서 위 사진처럼 나타나서 해결하는 부분에 있어 힘들었지만
마우스 우클릭으로 페이지 부분검사, 페이지소스보기를 통해 내가 놓친부분을 다시 찾아 해결할 수 있었다.
Author And Source
이 문제에 관하여(2021.08. 02CSS실습(17)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yoowhae/2021.08.-02CSS실습17저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)