[대구AI스쿨] 개발일지 27일차 210803

학습내용

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

1) 연예뉴스 왼쪽 (2)

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

<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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</h3>
					<p>[마이데일리=강다윤 기자] 펜싱선수 김정환, 구본길, 김준호, 오상욱이 다양한 비하인드를 솔직하게 풀어냈다.</p>
					<span class="source">마이데일리</span>
				</div>

				<img src="https://via.placeholder.com/88x88">
			</a>
		</li>

	</ul>


	<button class="btn-more">새로운 뉴스 가져오기</button>					

</div>




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

<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>펜트하우스3</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>




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

<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">SBS</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">SBS</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">SBS</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">SBS</span>
				<span class="program">런닝맨</span>
			</a>
		</li>

	</ul>
</div>




<!-- 연예뉴스 섹션 7 -->
<!-- 섹션 4와 동일 -->

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

	<ul>

		<li>
			<a href="#" class="ent-flex-between">
				<div class="ent-info">
					<h3>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</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>'펜싱金'구본길 "오상욱 군면제, 확신있었다"</h3>
					<p>[마이데일리=강다윤 기자] 펜싱선수 김정환, 구본길, 김준호, 오상욱이 다양한 비하인드를 솔직하게 풀어냈다.</p>
					<span class="source">마이데일리</span>
				</div>

				<img src="https://via.placeholder.com/88x88">
			</a>
		</li>

	</ul>


	<button class="btn-more">새로운 뉴스 가져오기</button>					

</div>




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

<div id="ent-section-8">
	
	<div class="title-wrap ent-flex-between">
		<h3>영화계는 지금</h3>
		<a href="#">더보기</a>						
	</div>


	<div class="movie-wrap ent-flex-start">  <!-- css에서 aling-items: stretch로 변경할 것 -->


		<div class="movie-left">
			<a href="#">
				<img src="https://via.placeholder.com/200x122">
				<h4>Title</h4>	
			</a>
		</div>
		

		<div class="movie-right">
			<ul>
				<li>
					<a href="#">아파트 가진자 운좋게 살고…차승원표 코믹재난 '싱크홀'150만 돌파</a>
					<span>스타뉴스</span>
				</li>
				<li>
					<a href="#">아파트 가진자 운좋게 살고…차승원표 코믹재난 '싱크홀'150만 돌파</a>
					<span>스타뉴스</span>
				</li>
				<li>
					<a href="#">아파트 가진자 운좋게 살고…차승원표 코믹재난 '싱크홀'150만 돌파</a>
					<span>스타뉴스</span>
				</li>
				<li>
					<a href="#">아파트 가진자 운좋게 살고…차승원표 코믹재난 '싱크홀'150만 돌파</a>
					<span>스타뉴스</span>
				</li>
				<li>
					<a href="#">아파트 가진자 운좋게 살고…차승원표 코믹재난 '싱크홀'150만 돌파</a>
					<span>스타뉴스</span>
				</li>
			</ul>
		</div>

	</div>

</div>




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

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

	<div class="title-wrap ent-flex-between">
		
		<div class="ent-flex-start">    <!-- align-items: 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>[단독] 레드벨벳 조이♥크러쉬, 핑크빛 열애...'고막커플'' 탄생</h4>
						<p>[스포츠조선 백지은 기자] 가요계 '고막커플'이 탄생했다. 가수 크러쉬와 그룹 레드벨벳 조이가 열애 중이다. 크러쉬와 조이는 지난해 5월 20일 크러쉬의 홈메이드 시리즈 첫 번째 싱글 '자나깨나'</p>
						<span>스포츠조선</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>[단독] 레드벨벳 조이♥크러쉬, 핑크빛 열애...'고막커플'' 탄생</h4>
						<p>[스포츠조선 백지은 기자] 가요계 '고막커플'이 탄생했다. 가수 크러쉬와 그룹 레드벨벳 조이가 열애 중이다. 크러쉬와 조이는 지난해 5월 20일 크러쉬의 홈메이드 시리즈 첫 번째 싱글 '자나깨나'</p>
						<span>스포츠조선</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>[단독] 레드벨벳 조이♥크러쉬, 핑크빛 열애...'고막커플'' 탄생</h4>
						<p>[스포츠조선 백지은 기자] 가요계 '고막커플'이 탄생했다. 가수 크러쉬와 그룹 레드벨벳 조이가 열애 중이다. 크러쉬와 조이는 지난해 5월 20일 크러쉬의 홈메이드 시리즈 첫 번째 싱글 '자나깨나'</p>
						<span>스포츠조선</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>[단독] 레드벨벳 조이♥크러쉬, 핑크빛 열애...'고막커플'' 탄생</h4>
						<p>[스포츠조선 백지은 기자] 가요계 '고막커플'이 탄생했다. 가수 크러쉬와 그룹 레드벨벳 조이가 열애 중이다. 크러쉬와 조이는 지난해 5월 20일 크러쉬의 홈메이드 시리즈 첫 번째 싱글 '자나깨나'</p>
						<span>스포츠조선</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>[단독] 레드벨벳 조이♥크러쉬, 핑크빛 열애...'고막커플'' 탄생</h4>
						<p>[스포츠조선 백지은 기자] 가요계 '고막커플'이 탄생했다. 가수 크러쉬와 그룹 레드벨벳 조이가 열애 중이다. 크러쉬와 조이는 지난해 5월 20일 크러쉬의 홈메이드 시리즈 첫 번째 싱글 '자나깨나'</p>
						<span>스포츠조선</span>
					</div>

					<img src="https://via.placeholder.com/88x88">									
				</div>

			</a>
		</li>


	</ol>
	

</div>




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

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

	<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">★FOCUS</span>
					<span class="source">스타뉴스</span>
					<h4>'NO EASY'한 가요계, 스트레이 키즈의 'NOISY'한 컴백 [★FOCUS]</h4>
				</div>
			</a>	
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/200x122">
				<div class="txt-wrap">
					<span class="program">★FOCUS</span>
					<span class="source">스타뉴스</span>
					<h4>'NO EASY'한 가요계, 스트레이 키즈의 'NOISY'한 컴백 [★FOCUS]</h4>
				</div>
			</a>	
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/200x122">
				<div class="txt-wrap">
					<span class="program">★FOCUS</span>
					<span class="source">스타뉴스</span>
					<h4>'NO EASY'한 가요계, 스트레이 키즈의 'NOISY'한 컴백 [★FOCUS]</h4>
				</div>
			</a>	
		</li>

	</ul>


</div>

css↓

/* 연예뉴스 섹션 4 */

 #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 ul li {
 	padding: 18px 0;
 	border-bottom: solid 1px #f1f1f1;
 }

 #ent-main .ent-left #ent-section-4 ul li:last-child {
 	border-bottom: initial;
 }

 #ent-main .ent-left #ent-section-4 ul li a {

 }

 #ent-main .ent-left #ent-section-4 ul li .ent-info {
 	width: 528px;
 }

 #ent-main .ent-left #ent-section-4 ul li .ent-info h3 {
 	font-size: 14px;
 	font-weight: 700;
 	margin-bottom: 7px;
 }

 #ent-main .ent-left #ent-section-4 ul li .ent-info p {
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 20px;
 	color: #898989;

 	margin-bottom: 9px;
 }

 #ent-main .ent-left #ent-section-4 ul li .ent-info .source {
 	font-size: 11px;
 	font-weight: 400;
 	color: #a7a7a7;
 }

 #ent-main .ent-left #ent-section-4 ul li img {
 	width: 88px;
 	height: 88px;
 	border: solid 1px #000;
 }

#ent-main .ent-left #ent-section-4 .btn-more {
	display: block;	
	width: 100%;
	height: 40px;
	background-color: #fff;   /* button태그의 기본 배경색은 회색이다. */
	border: solid 1px #e8e8e8;

	line-height: 40px;

	text-align: center;

	color: #444;
}





 /* 연예뉴스 섹션 5 */


#ent-main .ent-left #ent-section-5 {
	padding: 24px 0 14px;
	border-bottom: solid #e4e4e4 1px;
}

#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: flex-start;   /* 또는 stretch로 적용 */
}

#ent-main .ent-left #ent-section-5 ul li {

}

#ent-main .ent-left #ent-section-5 ul li a {
	display: block;
	width: 80px;
	height: 100%;

	text-align: center;
}

#ent-main .ent-left #ent-section-5 ul li a img {
	width: 55px;
	height: 55px;
	border-radius: 50%;

	margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-5 ul li a h4 {
	
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: -1px;
}





/* 연예뉴스 섹션 6 */

#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 ul li {
	width: 148px;
}

#ent-main .ent-left #ent-section-6 ul li a {

}

#ent-main .ent-left #ent-section-6 ul .img-wrap {
	position: relative;
	width: 148px;
	height: 85px;
	border: solid 1px #000;

	margin-bottom: 10px;
}

#ent-main .ent-left #ent-section-6 .img-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#ent-main .ent-left #ent-section-6 .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 a 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: 13px 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: 10px 2px 0 4px;
}





/* 연예뉴스 섹션 8 */

#ent-main .ent-left #ent-section-8 {
	padding: 24px 0 20px;
	border-bottom: solid 1px #e4e4e4;
}

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

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

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

#ent-main .ent-left #ent-section-8 .movie-wrap {
	align-items: stretch;
}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-left {

}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-left img {
	width: 200px;
	height: 122px;
	margin-bottom: 11px;
}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-left h4 {
	font-size: 12px;
	font-weight: 700;
}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-right {
	width: 412px;
	margin-left: 18px;
}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-right ul {

}

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

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-right li:last-child {
	margin-bottom: 0;
}

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-right a { 
	display: inline-block;
	max-width: 350px;
	margin-right: 5px;
	vertical-align: middle;

	font-size: 14px;
	font-weight: 700;

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

#ent-main .ent-left #ent-section-8 .movie-wrap .movie-right span {
	vertical-align: middle;

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




/* 연예뉴스 섹션 9 */


#ent-main .ent-left #ent-section-9 {

}

#ent-main .ent-left #ent-section-9 .title-wrap {
	/*margin-bottom: 17px;*/
}

#ent-main .ent-left #ent-section-9 .title-wrap div {
	align-items: flex-start;
}

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

#ent-main .ent-left #ent-section-9 .title-wrap ul {
	position: relative;
	top: -4px;
	margin-left: 19px;
}

#ent-main .ent-left #ent-section-9 .title-wrap li {

}

#ent-main .ent-left #ent-section-9 .title-wrap li a {
	font-size: 12px;
	color: #181818;
}

#ent-main .ent-left #ent-section-9 .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-9 .title-wrap li:first-child a:before {
	content: none;
}

#ent-main .ent-left #ent-section-9 .title-wrap li a.on {
	font-weight: 700;
	color: #e2458f;
	border-bottom: solid 1px #e2458f;
}

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

#ent-main .ent-left #ent-section-9 .news-lists {

}

#ent-main .ent-left #ent-section-9 .news-lists li {
	padding: 18px 0;
	border-bottom: solid 1px #f1f1f1;
}

#ent-main .ent-left #ent-section-9 .news-lists a {
	/*display: block;*/
}

#ent-main .ent-left #ent-section-9 .news-lists .rank {
	display: block;
	width: 40px;
	text-align: center;
}

#ent-main .ent-left #ent-section-9 .news-lists .news-info-wrap {
	width: calc(100% - 40px);
	/* 630px - 40px = 590px */
}

#ent-main .ent-left #ent-section-9 .news-lists .news-info-txt {
	width: calc(100% - 90px);
	/* 590px - 90px = 500px */
}

#ent-main .ent-left #ent-section-9 .news-lists .news-info-txt h4 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 9px;
}

#ent-main .ent-left #ent-section-9 .news-lists .news-info-txt p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;
	margin-bottom: 8px;

	/*display: inline-block;*/   /* inline-block으로 설정하면, 신문사명과 같은 줄로 나란히 표시되기 때문! */
	/*overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;*/   
	/* 말줄임표가 아닌 줄바꿈이었음. */
}

#ent-main .ent-left #ent-section-9 .news-lists .news-info-txt span {
	font-size: 11px;
	color: #898989;
}

#ent-main .ent-left #ent-section-9 .news-lists img {
	width: 88px;
	height: 88px;
}






/* 연예뉴스 섹션 10 */

#ent-main .ent-left #ent-section-10 {
	padding: 24px 0 20px;
	border-bottom: solid 1px #e4e4e4;
}

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

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

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

#ent-main .ent-left #ent-section-10 ul {

}

#ent-main .ent-left #ent-section-10 li {
	width: 200px;
	border: solid 1px #000;
}

#ent-main .ent-left #ent-section-10 a {
	display: block;
}

#ent-main .ent-left #ent-section-10 li img {
	/*width: 200px;*/   /* 이렇게 설정하면 border와 개체가 겹쳐진다. border-sizing: border-box;속성 때문 */
	width: 100%;
	height: 122px;
}

#ent-main .ent-left #ent-section-10 li .txt-wrap {
	padding: 13px 14px 18px;
}

#ent-main .ent-left #ent-section-10 li .txt-wrap span {
	font-size: 11px;
}

#ent-main .ent-left #ent-section-10 li .txt-wrap .program {
	color: #ff0080;
}

#ent-main .ent-left #ent-section-10 li .txt-wrap .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-10 li .txt-wrap .source {
	color: #999;
}

#ent-main .ent-left #ent-section-10 li .txt-wrap h4 {
	padding-top: 8px;

	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	min-height: 36px;
}






어려웠던 점과 해결 방안

1. section 5 아이콘과 프로그램 제목 정렬

연예뉴스 section 5에서 정렬이 제대로 이뤄지지 않았다.
강의에서는 모두 '모범택시'로 일괄 적용 했으나,

a태그 line-height를 적용하면서 제목이 길어져서 2줄이 될 경우를 대비한 것이라고 설명하셔서

어떻게 적용될지 궁금해서 제목을 모두 입력해 보았는데, 정렬이 제대로 되지 않아 실제 네이버 연예뉴스의 코드를 보고 고쳐보았다.

  • 네이버에서는 li태그 자체의 width값을 80px로 적용했는데, 여기에서는 img와 h4태그가 같이 묶여있는 상황이라 a태그의 width값을 80px으로 지정했다.

  • letter-spacing: -1px을 적용하지 않으면 3줄이 된다.

★★ 모두 제대로 적용된 버전 ↓ ★★


2. a태그에서 말줄임표시가 적용되지 않을때 주의할 점!

강의에서 a태그의 display속성을 바꾸지 않은채로 overflow: hidden;, text-overflow: ellipsis;, white-space: nowrap;을 적용했는데, 말줄임표가 적용되지 않았다.

크롬에서 검사로 확인해보니, max-width자체가 먹히질 않고 있었다.
max-width를 훨씬 벗어난 영역에 글자가 채워져 있었고, white-space: nowrap;만 적용되어 2줄이 아닌 한 줄로 표시되어 있었다.

공간에 대한 설정인 듯 하여, display: inline-block;으로 바꾸었더니 적용되었다.

★★ 모두 제대로 적용된 버전 ↓ ★★


3. display: table;

직접 적용하지는 않았지만, 네이버 원본 페이지에 적용되어있던 방식이다.
flex는 explorer 하위버전에서는 적용되지 않기 때문에 사용하는 배치방법.
table, 즉 표를 만들어 정렬하는 방법이다.

★ 참고할만한 포스팅
1. html table 태그 사용법 :
https://www.codingfactory.net/10495

  1. css display: table; 속성 사용법 : https://www.codingfactory.net/10776
  • html 에서 table태그

  • css 에서 display: table; 속성


4. flex는 inline 요소에만 적용 가능


5. section 9 p태그 width값 지정 오류

섹션 9에서 p태그의 width값 지정하는 데에 문제가 생겼음. wrap으로 표시될땐 자동으로 너비에서 줄바꿈현상이 일어나는데, nowrap으로 설정하고 max-width값을 계산하는데, 100%가 엄청 길게 잡혔음.

p태그의 부모태그가 정확한 width값이 설정되어있지 않았음. 부모의 부모태그가 calc(100% - 40px) = 590px이었는데, 그건 반영되지 않았다.


학습소감

아는 것을 위주로 실습을 계속 진행하고 있는데, 그래도 기본적인 것들에 대해서 적응하는데에 시간이 많이 걸린다는 것을 체감하고 있다.
flex가 inline 요소에만 적용할 수 있다는 것을 포스팅 했었는데도, 막상 실무에서는 잊고 있었다든가...
조금씩 익숙해 진 것에 대해서는 먼저 적용해보고 강의로 확인을 해 보거나, 강의와는 다르게 변형시켜서 코드를 입력해 보고 있다.
그리고 배운게 아니라서 넘어가는 코드들도 찾아보고 포스팅 해야겠다는 생각이 들었다.

좋은 웹페이지 즐겨찾기