2021년 9월 1일

신종원·2021년 9월 1일
0

학습한 내용

html - naver

추천 뉴스

				<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>



			
		</div>
			

		

		<div class="ent-right">


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

			<div id="ent-section-10">
				
				<div class="title-wrap ent-flex-between">
					<h3>많이 본 TV연예 뉴스</h3>
					<a href="#" class="more">더보기</a>
				</div>

				<ol>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="rank">1</span>
							<p>동해물과 백두산이 마르고 닳도록</p>
						</a>
					</li>
				</ol>
			</div>


			<div id="ent-section-11">
				
				<ul>
					<li>
						<a href="#">
							<div class="title-wrap ent-flex-between">
								<div class="title-left ent-flex-start">
									<span class="count">14</span>
									<h3>타이틀 1</h3>
								</div>
								<div class="icon-arrow"></div>
							</div>

							<div class="article-content ent-flex-between">
								<div class="content-left">
									<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
									<span class="source">스타뉴스</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="title-wrap ent-flex-between">
								<div class="title-left ent-flex-start">
									<span class="count">14</span>
									<h3>타이틀 1</h3>
								</div>
								<div class="icon-arrow"></div>
							</div>

							<div class="article-content ent-flex-between">
								<div class="content-left">
									<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
									<span class="source">스타뉴스</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="title-wrap ent-flex-between">
								<div class="title-left ent-flex-start">
									<span class="count">14</span>
									<h3>타이틀 1</h3>
								</div>
								<div class="icon-arrow"></div>
							</div>

							<div class="article-content ent-flex-between">
								<div class="content-left">
									<h4>서브 타이틀 서브 타이틀 서브 타이틀서브 타이틀 서브 타이틀</h4>
									<span class="source">스타뉴스</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</div>
						</a>
					</li>
				</ul>

				<div class="bottom ent-flex-between">
					<div class="btn-wrap ent-flex-start">
						<button class="btn btn-prev"></button>
						<button class="btn btn-next"></button>
					</div>
					<a href="#" class="more">더보기</a>
				</div>

			</div>

			<div id="ent-section-12">
				<div class="title-wrap">
					<h3>연예가 HOT 포토</h3>
				</div>

				<ul class="ent-flex-between">
					<li>
						<img src="https://via.placeholder.com/146x138">
						<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
						<span>스타들의 일상</span>
					</li>
					<li>
						<img src="https://via.placeholder.com/146x138">
						<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
						<span>스타들의 일상</span>
					</li>
					<li>
						<img src="https://via.placeholder.com/146x138">
						<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
						<span>스타들의 일상</span>
					</li>
					<li>
						<img src="https://via.placeholder.com/146x138">
						<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
						<span>스타들의 일상</span>
					</li>
				</ul>
			</div>


			<div id="ent-section-13">
				<div class="title-wrap ent-flex-between">
					<h3>연예가 인터뷰</h3>
					<a href="#" class="more">더보기</a>
				</div>

				<div class="heading ent-flex-between">
					
					<div class="heading-info">
						<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
						<span class="source">스포츠</span>
					</div>
					
					<img src="https://via.placeholder.com/70">
				</div>

				<ul>
					<li><a href="#">동해물과 백두산이 마르고 닳도록</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>

	</div>

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

}

#ent-main .ent-right {
float: right;
width: 324px;

padding-left: 24px;

}

#ent-main .ent-right .ent-banner {
width: 300px;
height: 250px;
background-color: grey;

border: solid 1px #000000;

margin-bottom: 30px;

}

#ent-main .ent-right #ent-section-10 {
padding-bottom: 12px;
border-bottom: solid 1px #e8e8e8;
}

#ent-main .ent-right #ent-section-10 .title-wrap {
margin-bottom: 8px;
}

#ent-main .ent-right #ent-section-10 .title-wrap h3 {
font-size: 16px;
}

#ent-main .ent-right #ent-section-10 .title-wrap a {
font-size: 12px;
color: #999;
}

#ent-main .ent-right #ent-section-10 ol {

}

#ent-main .ent-right #ent-section-10 ol li {
margin-bottom: 10px;
}

#ent-main .ent-right #ent-section-10 ol li a {

}

#ent-main .ent-right #ent-section-10 ol li .rank {
display: inline-block;
width: 16px;

font-size: 16px;
color: #e2458f;

text-align: center;

vertical-align: middle;

}

#ent-main .ent-right #ent-section-10 ol li p {
display: inline-block;
width: 270px;
vertical-align: middle;
font-size: 12px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

#ent-section-11 {
border-bottom: solid 1px #f2f2f2;
padding-bottom: 24px;
}

#ent-section-11 ul {
margin-bottom: 12px;
}

#ent-section-11 ul li {
padding: 14px;
border-bottom: solid 1px #f2f2f2;
}

#ent-section-11 ul a {

}

#ent-section-11 ul .title-wrap {
margin-bottom: 10px;
}

#ent-section-11 ul .title-wrap .title-left {

}

#ent-section-11 ul .title-wrap .title-left .count{
width: 20px;
height: 15px;
padding: 2px 4px;
border: solid 1px #e2458f;

color: #e2458f;
font-size: 10px;

margin-right: 8px;

}

#ent-section-11 ul .title-wrap .title-left h3 {
color: #e2458f;
font-size: 12px;
}

#ent-section-11 ul .title-wrap .icon-arrow {
width: 8px;
height: 12px;
background-color: #e2458f;
}

#ent-section-11 ul .article-content {

}

#ent-section-11 ul .article-content .content-left {
width: 190px;
}

#ent-section-11 ul .article-content .content-left h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 6px;
}

#ent-section-11 ul .article-content .content-left .source {
font-size: 11px;
color: #a6a6a6;
}

#ent-section-11 ul .article-content img {
width: 70px;
height: 70px;
border: solid 1px #000000;
}

#ent-section-11 .bottom .btn-wrap {

}

#ent-section-11 .bottom .btn-wrap .btn {
width: 24px;
height: 24px;
border: solid 1px #f2f2f2;
}

#ent-section-11 .bottom .btn-wrap .btn-prev {
background-color: grey;
border-right: none;
}

#ent-section-11 .bottom .btn-wrap .btn-next {
background-color: yellow;
}

#ent-section-11 .bottom .more {
font-size: 12px;
color: #999;
}

#ent-section-12 {
padding: 20px 0 2px;
border-bottom: solid 1px #e8e8e8;
}

#ent-section-12 .title-wrap {
margin-bottom: 12px;
}

#ent-section-12 .title-wrap h3 {
font-size: 16px;
}

#ent-section-12 ul {

}

#ent-section-12 li {
width: 146px;
margin-bottom: 19px;
}

#ent-section-12 li img {
width: 100%;
height: 138px;
border: solid 1px #000000;
margin-bottom: 9px;
}

#ent-section-12 li h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;

margin-bottom: 5px;

}

#ent-section-12 li span {
font-size: 11px;
color: #898989;
}

#ent-section-13 {
padding-top: 22px;
}

#ent-section-13 .title-wrap {
margin-bottom: 8px;
}

#ent-section-13 .title-wrap h3 {
font-size: 16px;
}

#ent-section-13 .title-wrap .more {
font-size: 12px;
color: #999;
}

#ent-section-13 .heading {
margin-bottom: 8px;
}

#ent-section-13 .heading .heading-info {
width: 210px;
}

#ent-section-13 .heading h4 {
font-size: 12px;
font-weight: 700;
line-height: 18px;
}

#ent-section-13 .heading .source{
font-size: 11px;
color: #999;
}

#ent-section-13 .heading img {
width: 70px;
height: 70px;
border: solid 1px #000000;
}

#ent-section-13 ul {

}

#ent-section-13 ul li {
margin-bottom: 8px;
}

#ent-section-13 ul a {
display: block;
width: 100%;
font-size: 12px;
color: #222;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

}

#ent-section-13 ul a:before {
display: inline-block;
content: '';
width: 2px;
height: 2px;

vertical-align: top;
background-color: silver;

margin: 5px 5px 0 0;

}

결과물

학습내용 중 어려웠던 점

홈페이지의 여백과 공백 설정이 어려웠던 것 같다.

해결방법

선생님의 수업을 따라가는 것도 중요하지만 혼자서 이 모습을 어떻게 구상하고, 어떻게 디자인 해야할지 내 머릿속으로 구상하는게 더 중요한 것 같다.

학습소감

이제 어느정도 틀린 부분에 있어서는 직관적으로 어떤 부분 때문에 화면의 모습이 다르게 나타나는지 알고, 그것을 바로 해결하는 것 같다.

profile
신종원
나는 돈 많이 버는 개발자가 될 것이다.
이전 포스트

2021년 8월 31일

다음 포스트

2021년 9월 1일

0개의 댓글

관련 채용 정보