2021.08.03네이버뉴스4

dogyeomyeo4444·2021년 8월 3일
대구AI스쿨

오늘의 강의 내용

  • 네이버뉴스 TV/연예 왼쪽 나머지 부분 카피캣


카피캣 영역인 네이버뉴스 TV/연예 왼쪽 나머지 부분

카피캣 완료된 네이버뉴스 TV/연예 왼쪽 나머지 부분

<!-- ent.html언어 -->
<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>에이치앤드 에이치앤드 에이치앤드 에이치앤드</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 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="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 type="button" class="bnt_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 type="button" class="bnt_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>Title 1</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</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</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</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</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>
                
<!-- style.css언어 -->
#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;
}



#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 .bnt_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: gray;
	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 {
	float: right;
	vertical-align: top;

	font-size: 11px;
	color: #898989;
}


#ent_main .ent_left #ent_section_8 .title_wrap {
	padding: 24px 0 6px;
}

#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 {
	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 {
	
}

#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;
}
  • 글자를 넣는 태그안에 또 연달아 글자를 넣는 태그를 넣을수없다.
    ex)
<h1><h1></h1></h1>

<a href=""><a href=""></a></a>

//사용할수 없는 코드법

* 강의를 끝난후 소감

어제에 이어서 네이버뉴스 TV/연예 왼쪽부분을 마무리 하였는데
강사님과 결과값이 달리나와 스스로 수정하여 결과를 도출해서 나름 기분좋은 강의였다

* 힘든점, 문제점

mac과 window의 기본값의 차이로 인해 수정이 가끔씩 필요했다.

* 개선방안

한가지 값을 도출하기 위해 몇가지 방법을 써보면서 가장적절한 방법으로 해결하였다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.08.02네이버뉴스3

다음 포스트

2021.08.04네이버뉴스5

0개의 댓글