2021.06.23 (네이버 뉴스 5)

이상화·2021년 6월 23일

학습한 내용

[네이버 연예 뉴스 오른쪽 부분]

				<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">2</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">3</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">4</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">5</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">6</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">7</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">8</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">9</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="rank">10</span>
								<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</p>
							</a>
						</li>
					</ol>
				</div>

#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 .more {
	font-size: 12px;
	color: #999;
}

#ent_main .ent_right #ent_section_10 ol li {
	margin-bottom: 10px;
}

#ent_main .ent_right #ent_section_10 ol li a .rank {
	display: inline-block;

	width: 16px;

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

	text-align: center;

	vertical-align: middle;
}

#ent_main .ent_right #ent_section_10 ol li a p {
	display: inline-block;

	width: 270px;

	font-size: 12px;

	vertical-align: middle;

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

				<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 타이틀 1 타이틀 1 타이틀 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/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>타이틀 1 타이틀 1 타이틀 1 타이틀 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/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>타이틀 1 타이틀 1 타이틀 1 타이틀 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/70x70">
								</div>
							</a>
						</li>
					</ul>

					<div class="bottom ent_flex_between">
						<div class="btn_wrap news_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>
							<a href="#">
								<img src="https://via.placeholder.com/146x138">
								<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
								<span>스타들의 일상</span>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/146x138">
								<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
								<span>스타들의 일상</span>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/146x138">
								<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
								<span>스타들의 일상</span>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/146x138">
								<h4>타이틀 타이틀 타이틀 타이틀 타이틀 타이틀</h4>
								<span>스타들의 일상</span>
							</a>
						</li>
					</ul>
				</div>

#ent_main .ent_right #ent_section_11 {
	border-bottom: solid 1px #f2f2f2;
	padding-bottom: 24px;
}

#ent_main .ent_right #ent_section_11 ul {
	margin-bottom: 12px;
}

#ent_main .ent_right #ent_section_11 ul li {
	padding: 14px;
	border-bottom: solid 1px #f2f2f2;
}

#ent_main .ent_right #ent_section_11 ul li a .title_wrap {
	margin-bottom: 10px;
}

#ent_main .ent_right #ent_section_11 ul li a .title_wrap .title_left .count {
	width: 20px;
	height: 15px;

	border: solid 1px #e2458f;

	font-size: 10px;
	color: #e2458f;
	line-height: 8px;

	padding: 2px 4px;
	margin-right: 8px;
}

#ent_main .ent_right #ent_section_11 ul li a .title_wrap .title_left h3 {
	font-size: 12px;
	color: #e2458f;
}

#ent_main .ent_right #ent_section_11 ul li a .title_wrap .icon_arrow {
	width: 8px;
	height: 12px;

	background-color: #e2458f;
}

#ent_main .ent_right #ent_section_11 ul li a .article_content .content_left {
	width: 190px;
}

#ent_main .ent_right #ent_section_11 ul li a .article_content .content_left h4 {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;

	margin-bottom: 6px;
}

#ent_main .ent_right #ent_section_11 ul li a .article_content .content_left .source {
	font-size: 11px;
	color: #a6a6a6;
}

#ent_main .ent_right #ent_section_11 ul li a .article_content img {
	width: 70px;
	height: 70px;

	border: solid 1px #000000;
}

#ent_main .ent_right #ent_section_11 .bottom .btn_wrap .btn {
	width: 24px;
	height: 24px;

	border: solid 1px #f2f2f2;
}

#ent_main .ent_right #ent_section_11 .bottom .btn_wrap .btn_prev {
	background-color: grey;

	border-right: none;
}

#ent_main .ent_right #ent_section_11 .bottom .btn_wrap .btn_next {
	background-color: yellow;
}

#ent_main .ent_right #ent_section_11 .bottom .more {
	font-size: 12px;
	color: #999;
}

#ent_main .ent_right #ent_section_12 {
	padding: 20px 0 2px;
	border-bottom: solid 1px #e8e8e8;
}

#ent_main .ent_right #ent_section_12 .title_wrap {
	margin-bottom: 12px;
}

#ent_main .ent_right #ent_section_12 .title_wrap h3 {
	font-size: 16px;
}

#ent_main .ent_right #ent_section_12 ul li {
	width: 146px;

	margin-bottom: 19px;
}

#ent_main .ent_right #ent_section_12 ul li a img {
	width: 100%;
	height: 138px;

	border: solid 1px #000000;

	margin-bottom: 9px;
}

#ent_main .ent_right #ent_section_12 ul li a h4 {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;

	margin-bottom: 5px;
}

#ent_main .ent_right #ent_section_12 ul li a span {
	font-size: 11px;
	color: #898989;
}

				<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/70x70">
					</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>

#ent_main .ent_right #ent_section_13 {
	padding-top: 22px;
}

#ent_main .ent_right #ent_section_13 .title_wrap {
	margin-bottom: 8px;
}

#ent_main .ent_right #ent_section_13 .title_wrap h3 {
	font-size: 16px;
}

#ent_main .ent_right #ent_section_13 .title_wrap .more {
	font-size: 12px;
	color: #999;
}

#ent_main .ent_right #ent_section_13 .heading {
	margin-bottom: 8px;
}

#ent_main .ent_right #ent_section_13 .heading .heading_info {
	width: 210px;
}

#ent_main .ent_right #ent_section_13 .heading .heading_info h4 {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

#ent_main .ent_right #ent_section_13 .heading .heading_info .source {
	font-size: 11px;
	color: #999;
}

#ent_main .ent_right #ent_section_13 .heading img {
	width: 70px;
	height: 70px;

	border: solid 1px #000000;
}

#ent_main .ent_right #ent_section_13 ul li {
	margin-bottom: 8px;
}

#ent_main .ent_right #ent_section_13 ul li a {
	display: block;

	width: 100%;

	font-size: 12px;
	color: #222;

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

#ent_main .ent_right #ent_section_13 ul li a:before {
	display: inline-block;
	content: "";
	width: 2px;
	height: 2px;

	vertical-align: top;

	background-color: silver;

	margin: 7px 7px 0 0;
}

학습내용 중 어려웠던 점

따로 어려운 내용은 없었고 영상에선 없었지만 카피하는 사이트의 footer부분과 border을 비슷하게 만들어 밨는데 바로 바로 영역을 캐치하지 못하고 시간이 조금 걸려서 완성이 되었습니다.
그리고 왼쪽 부분에 border을 넣는과정에 레이아웃이 틀어져서 약간 어려움이 있었습니다.

해결방법

아직 연습하는 단계라서 어느 부분을 수정해야 되는지 캐치하려면 시간이 걸리지만 앞으로 있는 예제들 에서도 조금씩 예측해서 코드를 작성하는 식으로 하면 레이아웃 구성이나 배치를 조금더 빠르게 수행할수 있을거라 생각합니다.
왼쪽 부분의 크기에 border값이 들어가면서 콘텐츠 영역이 줄어들면서 일부 영역이 틀어지는 현상이 발생해 #ent_main .ent_left 부분의 오른쪽 padding값을 border크기만큼 1px줄여서 해결했습니다.

학습소감

완전히 똑같지는 않지만 왼쪽부분에 작업한 내용과 비슷한 부분들이 많아서 작업하기가 수월했습니다.

이상화

개발자를 꿈꾸는 이상화입니다.

이전 포스트

2021.06.22 (네이버 뉴스 4)

다음 포스트