2021년 8월 2일 26일차

61939 단어 TV연예네이버연예네이버카피캣네이버 카피캣네이버뉴스

학습한 내용

html - ent

네이버 
<link rel="stylesheet" type="text/css" href="css/style.css">
<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">
									<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">
									<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>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
					</a>
				</li>

				<li>
					<a href="#">
						<img src="https://via.placeholder.com/148x148">
						<span>에이치앤드</span>
						<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
					</a>
				</li>

				<li>
					<a href="#">
						<img src="https://via.placeholder.com/148x148">
						<span>에이치앤드</span>
						<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
					</a>
				</li>

				<li>
					<a href="#">
						<img src="https://via.placeholder.com/148x148">
						<span>에이치앤드</span>
						<h3>[금새록] 오월의 새록 [금새록] 오월의 새록</h3>
					</a>
				</li>

			</ul>
			</div>

			

		</div>

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

	</div>

</main>
### 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;
}

.ent-border {
border: solid 1px #000000;
}

#ent-header {
width: 100%;
height: 62px;
background-color: #ffffff;
border-bottom: solid 1px #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: 700px;
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;
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: 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: 10px;

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: #ff0000;
}

#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: soild 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, .3);
padding: 9px 10px 8px;

left: 0;
bottom: 0;

color: #ffffff;
font-size: 12px;
font-weight: 700;

}

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

결과물

학습내용 중 어려웠던 점

오늘은 어려운 점은 없었다. 코드 틀린 부분도 찾기 쉬웠다.

해결방법

많은 연습을 해야 실력이 늘고 내가 틀린 코드가 어떤지 금방 알아차리는 것 같다.

학습소감

예전에는 제발 코드 틀리지마라 찾기 너무 힘들어서 찾는데 1시간이 걸리고, 찾으면 뭔가 뿌듯한 기분이였는데 코드 틀린 부분을 막상 바로 찾으니 이젠 그런 성취감이 떨어지는 것 같다. 나도 이제 걸음마를 하는 단계로 접어든걸까..?

[Algorithm] ➕백준 1541 잃어버린 괄호
[javascript] 프로그래머스/짝지어 제거하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage