2021.06.22 (네이버 뉴스 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>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="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>
#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 li {
	padding: 18px 0;

	border-bottom: solid 1px #f1f1f1;
}

#ent_main .ent_left #ent_section_4 ul li:last-child {
	border-bottom: none;
}

#ent_main .ent_left #ent_section_4 ul li a .ent_info {
	width: 528px;
}

#ent_main .ent_left #ent_section_4 ul li a .ent_info h3 {
	font-size: 14px;
	font-weight: 700;

	margin-bottom: 7px;
}

#ent_main .ent_left #ent_section_4 ul li a .ent_info p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;

	line-height: 20px;

	margin-bottom: 9px;
}

#ent_main .ent_left #ent_section_4 ul li a .ent_info .source {
	font-size: 11px;
	font-weight: 400;
	color: #a7a7a7;
}

#ent_main .ent_left #ent_section_4 ul li a 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;

	line-height: 40px;

	text-align: center;

	color: #444;

	border: solid 1px #e8e8e8;
}

#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 ul li a {
	display: block;
	
	width: 100%;
	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 {
	max-width: 55px;
	font-size: 12px;
	font-weight: 700;

	line-height: 16px;
}

				<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">TV조선</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">TV조선</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">TV조선</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">TV조선</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="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 Title1 Title1 Title1</h4>
							</a>
						</div>

						<div class="right">
							<ul>
								<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 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 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 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 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 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="ent_lists">
						<li class="ent_flex_start">
							<span class="rank">1</span>

							<a href="#" class="ent_flex_between">			
								<div class="ent_info_wrap">
									<div class="ent_info_txt">
										<h4>Title Title Title Title Title Title Title</h4>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span>텐아시아</span>
									</div>
								</div>

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

						<li class="ent_flex_start">
							<span class="rank">2</span>

							<a href="#" class="ent_flex_between">			
								<div class="ent_info_wrap">
									<div class="ent_info_txt">
										<h4>Title Title Title Title Title Title Title</h4>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span>텐아시아</span>
									</div>
								</div>

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

						<li class="ent_flex_start">
							<span class="rank">3</span>

							<a href="#" class="ent_flex_between">			
								<div class="ent_info_wrap">
									<div class="ent_info_txt">
										<h4>Title Title Title Title Title Title Title</h4>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span>텐아시아</span>
									</div>
								</div>

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

						<li class="ent_flex_start">
							<span class="rank">4</span>

							<a href="#" class="ent_flex_between">			
								<div class="ent_info_wrap">
									<div class="ent_info_txt">
										<h4>Title Title Title Title Title Title Title</h4>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span>텐아시아</span>
									</div>
								</div>

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

						<li class="ent_flex_start">
							<span class="rank">5</span>

							<a href="#" class="ent_flex_between">			
								<div class="ent_info_wrap">
									<div class="ent_info_txt">
										<h4>Title Title Title Title Title Title Title</h4>
										<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
										동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
										<span>텐아시아</span>
									</div>
								</div>

								<img src="https://via.placeholder.com/88x88">
							</a>
						</li>
					</ol>
				</div>
#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 li {
	width: 148px;
}

#ent_main .ent_left #ent_section_6 ul li .img_wrap {
	position: relative;

	width: 148px;
	height: 85px;

	border: solid 1px #000000;

	margin-bottom: 10px;
}

#ent_main .ent_left #ent_section_6 ul li .img_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#ent_main .ent_left #ent_section_6 ul li .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 li h4 {
	font-size: 12px;

	margin-bottom: 8px;
}

#ent_main .ent_left #ent_section_6 ul li span {
	font-size: 11px;
	color: #141414;
}

#ent_main .ent_left #ent_section_6 ul li .source {
	color: #999;
}

#ent_main .ent_left #ent_section_6 ul li .source:after {
	display: inline-block;
	content: "";
	width: 2px;
	height: 2px;
	background-color: #d3d3d3;

	vertical-align: top;

	margin: 12px 2px 0 4px;
}

#ent_main .ent_left #ent_section_6 ul li .program:after {
	display: inline-block;
	content: "";
	width: 5px;
	height: 5px;
	background-color: red;

	vertical-align: top;

	margin: 10px 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 a img {
	width: 200px;
	height: 122px;

	margin-bottom: 11px;
}

#ent_main .ent_left #ent_section_7 .movie_wrap .left a 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 li {
	margin-bottom: 7px;
}

#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li:last-child {
	margin-bottom: 0;
}

#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li a {
	display: inline-block;
	max-width: 360px;

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

	vertical-align: top;

	margin-right: 5px;

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

#ent_main .ent_left #ent_section_7 .movie_wrap .right ul li span {
	font-size: 10px;
	color: #898989;

	vertical-align: top;
}

#ent_main .ent_left #ent_section_8 {
	padding-top: 24px;
}

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

	margin-left: 19px;

	top: -3px;
}

#ent_main .ent_left #ent_section_8 .title_wrap ul li a {
	font-size: 12px;
	color: #181818;
}

#ent_main .ent_left #ent_section_8 .title_wrap ul li a:before {
	display: inline-block;
	content: "";
	width: 1px;
	height: 10px;
	background-color: #e8e8e8;

	margin: 0 10px;

	vertical-align: -1px;
}

#ent_main .ent_left #ent_section_8 .title_wrap ul li:first-child a:before {
	content: initial;
}

#ent_main .ent_left #ent_section_8 .title_wrap ul 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 .ent_lists li {
	padding: 18px 0;

	border-bottom: solid 1px #f1f1f1;
}

#ent_main .ent_left #ent_section_8 .ent_lists li .rank {
	width: 40px;

	text-align: center;
}

#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt {
	width: 486px;
}

#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt h4 {
	font-size: 14px;
	font-weight: 700;

	margin-bottom: 9px;
}

#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;

	margin-bottom: 8px;
}

#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap .ent_info_txt span {
	font-size: 11px;
	color: #898989;
}

#ent_main .ent_left #ent_section_8 .ent_lists li a .ent_info_wrap img {
	width: 88px;
	height: 88px;
}


<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 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 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 Title 1</h4>
								</div>
							</a>
						</li>
					</ul>
				</div>
#ent_main .ent_left #ent_section_9 {
	border-bottom: solid 1px #e4e4e4;
	
	padding: 24px 0 20px;
}

#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 ul li {
	width: 200px;
	border: solid 1px #000000;
}

#ent_main .ent_left #ent_section_9 ul li a {
	display: block;
}

#ent_main .ent_left #ent_section_9 ul li a img {
	width: 100%;
	height: 122px;
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap {
	padding: 13px 14px 18px;
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap span {
	font-size: 11px;
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .program {
	color: #ff0080;
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .program:after {
	display: inline-block;
    content: "";
    width: 2px;
    height: 2px;
    background-color: #d3d3d3;
    vertical-align: top;
    margin: 12px 2px 0 8px;	
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap .source {
	color: #999;
}

#ent_main .ent_left #ent_section_9 ul li a .txt_wrap h4 {
	min-height: 36px;

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

	line-height: 20px;

	padding-top: 8px;
}

학습내용 중 어려웠던 점

section5 영역과 section8 영역을 우선 영상에 나온거 처럼 완료하고 naver와 a태그 영역이나 이런거를 최대한 맞추려고 할때 약간 어렵고 시간이 걸렸습니다.

해결방법

section5의 경우 변경한 코드는 우선 li태그에 넚이와 높이값을 주고 li>a태그 안에 내용을 가운데 정렬하는 방식으로 하고 h4태그의 글자가 두줄이 되면 자동으로 줄바꿈 하면서 가운데 정렬을 유지하도록 display: inline-block를 적용하고 width를 주는 방식으로 변경 했습니다.

section8의 경우 영상에선 a태그 안에 span태그와 다른 컨텐츠를 넣어서 작업했는데 naver의 경우 span태그의 랭크 부분은 a태그 영향을 받지 않는 부분으로 보여서 설계도면과 css선택자 등을 수정하면서 변경 작업을 하면서 해결했습니다.

학습소감

따로 section으로 여러개 나눠서 작업하니 코드를 접어서 관리하기도 편하고 원하는 부분을 수정할때 그 코드만 펼처서 작업 할수 있어서 편했습니다.

좋은 웹페이지 즐겨찾기