8월 4일 Velog

류영서·2021년 8월 4일
대구AI스쿨
0

학습한 내용

네이버 연예 뉴스 실습 #3

4. Main Right

구조

[html]

			<div class="ent_main_right">
				
				<div class="ent_banner"></div>


				<div id="ent_section_10"></div>


				<div id="ent_section_11"></div>


				<div id="ent_section_12"></div>


				<div id="ent_section_13"></div>

			</div>

(1) ent banner

[html]

				<div class="ent_banner"></div>

[css]

#ent_main .ent_main_right .ent_banner {
	width: 300px;
	height: 250px;
	background-color: black;
	border-bottom: solid 1px #000000;

	margin-bottom: 30px;
}

(2) ent section 10

[html]

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

[css]

#ent_main .ent_main_right #ent_section_10 {
	border-bottom: solid 1px #e8e8e8;
	padding-bottom: 12px;
}

#ent_section_10 .title_wrap {
	margin-bottom: 17px;
}

#ent_section_10 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_10 .title_wrap a {
	font-size: 12px;
	color: #999;
}

#ent_section_10 ol li {
	/*margin-bottom: 10px; -> 배치가 맞지 않아서 a에 높이값을 주는 것으로 대체*/
}

#ent_section_10 ol li a {
	display: block;

	width: 300px;
	height: 28.8px;
}

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

	width: 16px;

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

	text-align: center;

	vertical-align: middle;
}

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

	width: 270px;

	font-size: 12px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

	vertical-align: middle;

	padding-left: 8px;
}

(3) ent section 11

[html]

				<div id="ent_section_11">
					<ul>
						<li>
							<a href="#" 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>
							</a>

							<a href="#" class="article_content ent_flex_between">
								<div class="content_left">
									<h4>쏠 "원슈타인과 친분 없어…직접 DM 보내 피처링 부탁" ('정희')</h4>
									<span class="source">텐아시아</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</a>
						</li>
						<li>
							<a href="#" 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>
							</a>

							<a href="#" class="article_content ent_flex_between">
								<div class="content_left">
									<h4>쏠 "원슈타인과 친분 없어…직접 DM 보내 피처링 부탁" ('정희')</h4>
									<span class="source">텐아시아</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</a>
						</li>
						<li>
							<a href="#" 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>
							</a>

							<a href="#" class="article_content ent_flex_between">
								<div class="content_left">
									<h4>쏠 "원슈타인과 친분 없어…직접 DM 보내 피처링 부탁" ('정희')</h4>
									<span class="source">텐아시아</span>
								</div>
								<img src="https://via.placeholder.com/70">
							</a>
						</li>
					</ul>

					<div class="bottom ent_flex_between">
						<div class="btn_wrap ent_flex_start">
							<button type="button" class="btn btn_prev"><</button>
							<button type="button" class="btn btn_next">></button>
						</div>
						<a href="#" class="more">더보기 ▶</a>
					</div>
				</div>

[css]

#ent_main .ent_main_right #ent_section_11 {
	border-bottom: solid 1px #f9f9f9;

	padding-bottom: 24px;
}

#ent_section_11 ul li {
	border-bottom: solid 1px #f2f2f2;

	padding: 14px 0;
}

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

#ent_section_11 .title_wrap .title_left .count {
	display: inline-block;

	width: 20px;
	height: 20px;
	border: solid 1px #e2458f;
	border-radius: 5px;

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

	line-height: 18px;
	text-align: center;
	/*padding 대신 중앙 정렬을 하기 위해 사용하였다.*/

	margin-right: 8px;
}

#ent_section_11 .title_wrap .title_left h3 {
	font-size: 12px;
	font-weight: 700;
	color: #e2458f;
}

#ent_section_11 .title_wrap .icon_arrow {
	width: 8px;
	height: 12px;
	background-color: #e2458f;
}

#ent_section_11 .article_content .content_left {
	width: 190px;
}

#ent_section_11 .article_content .content_left h4 {
	font-size: 12px;
	font-weight: 700;

	line-height: 18px;

	margin-bottom: 6px;
}

#ent_section_11 .article_content .content_left .source {
	font-size: 11px;
	color: #a6a6a6;
}

#ent_section_11 .article_content img {
	width: 70px;
	height: 70px;
	border: solid 1px #000000;

	margin-right: 16px;
}

#ent_section_11 .bottom {
	margin-top: 12px;
}

#ent_section_11 .bottom .btn_wrap .btn {
	width: 24px;
	height: 24px;
	background-color: #ffffff;
	border: solid 1px #f2f2f2;

	font-size: 20px;
	font-weight: 400;
}

#ent_section_11 .bottom .btn_wrap .btn.btn_prev {
	color: grey;

	border-right: none;
}

#ent_section_11 .bottom .btn_wrap .btn.btn_next {
	color: black;
}

#ent_section_11 .bottom .more {
	font-size: 12px;
	color: #999;
}
  • 버튼 태그는 inline-block 요소이므로 원래 사이에 공백을 가지고 있지만 flex 사용함으로써 제거됨

(4) ent section 12

[html]

				<div id="ent_section_12">
					<h3>연예가 HOT 포토</h3>

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

[css]

#ent_main .ent_main_right #ent_section_12 {
	border-bottom: solid 1px #e8e8e8;

	padding: 20px 0 2px;
}

#ent_section_12 h3 {
	font-size: 16px;

	margin-bottom: 12px;
}

#ent_section_12 ul li {
	width: 146px;

	margin-bottom: 19px;
}

#ent_section_12 ul li a img {
	width: 100%;
	height: 138px;
	border: solid 1px #000000;

	margin-bottom: 9px;
}

#ent_section_12 ul li a h4 {
	font-size: 12px;
	font-weight: 700;

	line-height: 18px;

	margin-bottom: 5px;
}

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

(5) ent section 13

[html]

				<div id="ent_section_13">
					<div class="title_wrap ent_flex_between">
						<h3>연예가 인터뷰</h3>
						<a href="#" class="more">더보기</a>
					</div>

					<div class="headline ent_flex_between">
						<div class="headline_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="#">
							'싱크홀' 김성균 "차승원과 스킨십 하며 가까워져…4개월간 유격훈련한 기분" 		
							</a>
						</li>
						<li>
							<a href="#">
							'결사곡2' 이가령 "이민영, 적이었지만 만난 게 행운이었다" [M+인터뷰]			
							</a>
						</li>
						<li>
							<a href="#">
							'싱크홀' 김성균 "웃기는 이광수? 휴대폰도 안 보고 집중 배울게 많다"			
							</a>
						</li>
					</ul>
				</div>

[css]

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

#ent_section_13 .title_wrap {
	padding: 0 0 9px 2px;
}

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

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

#ent_section_13 .headline {
	padding-bottom: 8px;
}

#ent_section_13 .headline .headline_info {
	width: 230px;

	padding: 6px 20px 0 0;
}

#ent_section_13 .headline .headline_info h4 {
	font-size: 12px;
	font-size: 700;

	line-height: 18px;
}

#ent_section_13 .headline .headline_info .source {
	font-size: 11px;
	color: #a6a6a6;

	padding: 6px 0 2px;
}

#ent_section_13 .headline img {
	width: 70px;
	height: 70px;
	border: solid 1px #000000;
}

#ent_section_13 ul li {
	width: 300px;
}

#ent_section_13 ul li a {
	display: block;

	/*max-width: 280px;*/
	width: 100%;

	font-size: 12px;
	line-height: 26px;
	color: #222;

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

#ent_section_13 ul li a:before {
	content: "";
	display: inline-block;

	width: 2px;
	height: 2px;
	background-color: silver;

	margin: 11px 6px 0 0;
	vertical-align: top;
}

[html]

	<footer id="ent_footer">
		<div class="ent_container">
			
			<ul class="ent_flex_center">
				<li><a href="#">이용약관</a></li>
				<li><a href="#">서비스 운영 원칙</a></li>
				<li><a href="#"><strong>개인정보 처리방침</strong></a></li>
				<li><a href="#">책임의 한계와 법적고지</a></li>
				<li><a href="#">TV연예 고객센터</a></li>
				<li><a href="#">TV연예 제휴제안</a></li>
			</ul>

			<p>본 콘텐츠의 저작권은 제공처 또는 네이버에 있으며 이를 무단 이용하는 경우 저작권법 등에 따라 법적책임을 질 수 있습니다.</p>

			<div class="address">
				<a href="#" class="logo"><strong>NAVER</strong></a>
				<span>Copyright ©</span>
				<a href="#"><strong>NAVER Corp.</strong></a>
				<span>All Rights Reserved.</span>
			</div>
			
		</div>
	</footer>

[css]

#ent_footer {
	text-align: center;

	padding: 48px 0 41px;
}

#ent_footer ul {
	margin-bottom: 9px;
}

#ent_footer ul li a {
	font-size: 12px;
	color: #333;
}

#ent_footer ul li a:before {
	content: "";
	display: inline-block;

	width: 1px;
	height: 11px;
	background-color: #e8e8e8;

	vertical-align: -1px;
	margin: 0 8px;
}

#ent_footer ul li:first-child a:before {
	content: none;
}

#ent_footer p {
	font-size: 11px;
	color: #7e7e7e;

	padding: 3px 0 15px;
}

#ent_footer .address a {
	font-size: 11px;
}

#ent_footer .address a.logo {
	font-size: 14px;
	color: #2ab300;
}

#ent_footer .address span {
	font-size: 10px;

	padding-left: 2px;
}
  • 전체 영역에 text-align: center;을 적용하여 중앙 배치 후 정렬한다.

profile
류영서
이전 포스트

8월 3일 Velog

다음 포스트

8월 5일 Velog

0개의 댓글