학습내용

1. 네이버 연예뉴스 (3)

1) 연예뉴스 오른쪽 영역

<!-- 연예뉴스 오른쪽 영역 -->

<div class="ent-right">


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



	<!-- 연예뉴스 섹션 11 -->

	<div id="ent-section-11">
		
		<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>



	<!-- 연예뉴스 섹션 12 -->

	<div id="ent-section-12">

		<ul>

			<li>
				<a href="#">

					<div class="title-wrap ent-flex-between">

						<div class="title-left ent-flex-start">
							<span class="count">14</span>
							<h3>트와이스 스포일러 공개</h3>
						</div>

						<div class="icon-arrow"></div>
					</div>

					<div class="article-content ent-flex-between">
						<div class="content-left">
							<h4>트와이스, 10월 1일 첫 영어 싱글 '더 필스' 전세계 동시 발매</h4>
							<span class="source">스포티비뉴스</span>
						</div>
						<img src="https://via.placeholder.com/70x70">
					</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>트와이스 스포일러 공개</h3>
						</div>

						<div class="icon-arrow"></div>
					</div>

					<div class="article-content ent-flex-between">
						<div class="content-left">
							<h4>트와이스, 10월 1일 첫 영어 싱글 '더 필스' 전세계 동시 발매</h4>
							<span class="source">스포티비뉴스</span>
						</div>
						<img src="https://via.placeholder.com/70x70">
					</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>트와이스 스포일러 공개</h3>
						</div>

						<div class="icon-arrow"></div>
					</div>

					<div class="article-content ent-flex-between">
						<div class="content-left">
							<h4>트와이스, 10월 1일 첫 영어 싱글 '더 필스' 전세계 동시 발매</h4>
							<span class="source">스포티비뉴스</span>
						</div>
						<img src="https://via.placeholder.com/70x70">
					</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>



	<!-- 연에뉴스 섹션 13 -->

	<div id="ent-section-13">

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



	<!-- 연에뉴스 섹션 14 -->

	<div id="ent-section-14">

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


		<div class="heading">
			<div class="heading-info">
				<h4>'컴백' 스트레이 키즈 "'소리꾼' 킬링 포인트? 퉤퉤퉤"</h4>
				<span class="source">MBC연예</span>							
			</div>
			<img src="https://via.placeholder.com/70">
			<!-- 70만 입력하면 가로x세로 70x70인 이미지 박스가 생성된다. -->
		</div>


		<ul>
			<li><a href="#">'악마판사' 김재경의 고민과 성장 #9년차 #레인보우 #지성</a></li>
			<li><a href="#">'악마판사' 김재경의 고민과 성장 #9년차 #레인보우 #지성</a></li>
			<li><a href="#">'악마판사' 김재경의 고민과 성장 #9년차 #레인보우 #지성</a></li>
			<li><a href="#">'악마판사' 김재경의 고민과 성장 #9년차 #레인보우 #지성</a></li>
			<li><a href="#">'악마판사' 김재경의 고민과 성장 #9년차 #레인보우 #지성</a></li>
		</ul>


	</div>




</div>

css↓

/* 연예뉴스 메인 오른쪽 */

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

	padding-left: 24px;
}	



/* 오른쪽 배너 */

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

	border: solid 1px #000;

	margin-bottom: 30px;
}



/* 연예뉴스 섹션 11 */

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

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

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

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

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

}

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

#ent-main .ent-right #ent-section-11 li a {

}

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

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

	text-align: center;
	
	vertical-align: middle;
}

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

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


 
/* 연예뉴스 섹션 12 */

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

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

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

#ent-section-12 ul li a {

}

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

#ent-section-12 ul li .title-wrap .title-left {

}

#ent-section-12 ul li .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-12 ul li .title-wrap .title-left h3 {
	color: #e2458f;
	font-size: 12px;
}

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

#ent-section-12 ul li .article-content {

}

#ent-section-12 ul li .article-content .content-left {
	width: 230px;
	padding: 6px 20px 0 0;
}

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

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

}

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

#ent-section-12 .bottom {

}

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

}

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

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

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

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





/* 연예뉴스 섹션 13 */

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

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

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

#ent-section-13 ul {

}

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

#ent-section-13 ul li img {
	width: 100%;
	height: 100%;
	border: solid 1px #000;
	margin-bottom: 9px;
}

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

	margin-bottom: 5px;
}

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




/* 연예뉴스 섹션 14 */

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

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

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

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

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

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

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

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

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

#ent-section-14 ul {

}

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

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

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

#ent-section-14 ul li a:before {
	display: inline-block;
	content: "";
	width: 2px;
	height: 2px;

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

	margin: 5px 5px 0 0;
}

---

어려웠던 점과 해결방안

• inline요소들을 기본적으로 공백을 가지고 있다.

---

학습소감