Dev log - 28, 네이버 뉴스 카피캣 실습 #5

박강산·2021년 8월 4일
0

대구AI스쿨 - 개발일지

목록 보기
28/44

학습한 내용

네이버 뉴스 실습 - 기본 세팅

HTML 문서

<!DOCTYPE html>
<html>
<head>                 
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>

CSS 문서

/* Default CSS */
* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: #000000;
}

img {
	vertical-align: middle;
}

button {
	border: none;
}

input, textarea {
	outline: none;
}

.clearfix {
	clear: both;
}

.container {
	width: 1130px;
	margin: 0 auto;
}

.ent-container {
	width: 980px;
	margin: 0 auto;
}

.ent-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ent-flex-center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.ent-flex-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

.ent-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.end-border {
	border: solid 1px #000000;
}

네이버 뉴스 실습 - 네이버 연예 뉴스 오른쪽 영역

  • CSS 적용을 위한 태그의 경로는 자세하게 적으면 좋으나, 연속되는 숫자처럼 겹치지 않는 고유의 class 를 설정한다면, 자세하게 경로를 입력하지 않고 생략해서 적어도 무방함

  • ent-section-11 영역의 count 영역의 크기를 원문과 같이 조정하였고 text-align: center 을 적용하였음

  • button 태그는 inline-block 속성을 지녔고, 이에 inline 속성이 기본값으로 가지는 공백을 지님. 그렇기에, 미리 만들어둔 CSS 기본 세팅의 flex-start 속성을 사용 시, 서로 간의 공백을 없애고 좌우 배치를 할 수 있음

  • 공백을 설정할 때는, margin-bottom 이나 margin-top 둘 중에 하나로 통일하거나, 가능한 최대한 통일하도록 하는 식으로 일관성있게 작성

  • ent-section-13 영역의 h3 영역의 글꼴을 원문과 같이 변경함

HTML 문서

<body>
    <main role="main" id="ent-main">
        <div class="ent-container">
			<div class="ent-right">
				<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>

				<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">4</span>
										<h3>양궁 3관왕 안산오늘 SBS 8뉴스 전격 출연</h3>
									</div>
									<div class="icon-arrow"></div>
								</div>

								<div class="article-content ent-flex-between">
									<div class="content-left">
										<h4>'양궁 3관왕' 안산, 오늘(4일) SBS '8뉴스' 전격 출연</h4>
										<span class="source">마이데일리</span>
									</div>
									<img src="https://via.placeholder.com/70">
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<div class="title-wrap ent-flex-between">
									<div class="title-left ent-flex-start">
										<span class="count">4</span>
										<h3>양궁 3관왕 안산오늘 SBS 8뉴스 전격 출연</h3>
									</div>
									<div class="icon-arrow"></div>
								</div>

								<div class="article-content ent-flex-between">
									<div class="content-left">
										<h4>'양궁 3관왕' 안산, 오늘(4일) SBS '8뉴스' 전격 출연</h4>
										<span class="source">마이데일리</span>
									</div>
									<img src="https://via.placeholder.com/70">
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<div class="title-wrap ent-flex-between">
									<div class="title-left ent-flex-start">
										<span class="count">4</span>
										<h3>양궁 3관왕 안산오늘 SBS 8뉴스 전격 출연</h3>
									</div>
									<div class="icon-arrow"></div>
								</div>

								<div class="article-content ent-flex-between">
									<div class="content-left">
										<h4>'양궁 3관왕' 안산, 오늘(4일) SBS '8뉴스' 전격 출연</h4>
										<span class="source">마이데일리</span>
									</div>
									<img src="https://via.placeholder.com/70">
								</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>

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

				<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">KBS 연예</span>
						</div>
						
						<img src="https://via.placeholder.com/70">
					</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>
			</div>
		</div>
	</main>
</body>

CSS 문서 1 - style.css

#ent-main .ent-right {
	float: right;
	width: 324px;

	padding-left: 24px;
}

#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 a {
	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 .rank {
	display: inline-block;
	width: 16px;

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

	text-align: center;

	vertical-align: middle;
}

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

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

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

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

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

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

#ent-section-11 ul .title-wrap .title-left .count{
	width: 18px;
	height: 18px;
	padding: 2px 4px;
	border: solid 1px #e2458f;

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

	text-align: center;

	margin-right: 8px;
}

#ent-section-11 ul .title-wrap .title-left h3 {
	color: #e2458f;
	font-size: 11px;
}

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

#ent-section-11 ul .article-content .content-left {
	width: 190px;
}

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

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

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

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

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

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

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

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

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

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

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

#ent-section-12 li img {
	width: 100%;
	height: 138px;
	border: solid 1px #000000;
	margin-bottom: 9px;
}

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

	margin-bottom: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#ent-section-13 ul a:before {
	display: inline-block;
	content: '';
	width: 2px;
	height: 2px;

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

	margin: 5px 5px 0 0;
}

학습한 내용 중 어려웠던 점 또는 해결못한 것들

  • 없음

해결방법

  • 없음

학습 소감

  • 오늘은 네이버 연예 뉴스 카피캣 실습을 종료하였음. 오늘의 내용은 긴 편이 아니어서 훨씬 수월하게 끝낸듯 함. 멘토님이 말씀하신 것 중, 공백을 margin-top 혹은 margin-bottom 으로 통일하라는 얘기를 해주셨는데, 실제로 내가 원하는 내용으로 수정할 때, 이 두 속성이 번갈아가며 사용되어 있으니 수정하기 번거롭다고 느꼈었음. class 을 설정할 때도, CSS 속성을 적용할 때도 일관성있는 작성이 중요하다는 것을 다시 한번 마음에 되새길 수 있었음.
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 27, 네이버 뉴스 카피캣 실습 #4

다음 포스트

Dev log - 29, 네이버 게임 카피캣 실습 #1

0개의 댓글