2021.06.18 (네이버 뉴스 2)

학습한 내용

[네이버 뉴스 메인 왼쪽 부분]

<div class="news_left">
				<div class="news_main_wrap news_custom">
					<div class="news_main_header news_flex_between">
						<div class="news_main_header_left news_flex_start">
							<h3><a href="#">헤드라인 뉴스</a></h3>
							<ul class="news_flex_start">
								<li><a href="#">헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다.</a></li>
							</ul>					
						</div>

						<div class="news_main_header_right news_flex_end">
							<i class="icon_1"></i>
							<i class="icon_2"></i>
							<i class="icon_3"></i>
						</div>
					</div>

					<div class="news_main_body news_flex_start">
						<div class="image_wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news_lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><i></i></li>
							<li><a href="#">title 2 title 2 title 2 title 2 title 2</a><i></i></li>
							<li><a href="#">title 3 title 3 title 3 title 3</a><i></i></li>
							<li><a href="#">title 4 title 4 title 4 title 4 title 4 title 4</a><i></i></li>
							<li><a href="#">title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5</a><i></i></li>
						</ul>
					</div>
				</div>

				<div class="news_main_wrap">
					<div class="news_main_header news_flex_between">
						<div class="news_main_header_left news_flex_start">
							<h3><a href="#">정치</a></h3>
							<ul class="news_flex_start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회 정당</a></li>
								<li><a href="#">청와대</a></li>
							</ul>					
						</div>

						<div class="news_main_header_right news_flex_end">
							<i class="icon_1"></i>
							<i class="icon_2"></i>
							<i class="icon_3"></i>
						</div>
					</div>

					<div class="news_main_body news_flex_start">
						<div class="image_wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news_lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
							<li><a href="#">title 2 title 2 title 2 title 2 title 2</a><span>한겨레</span></li>
							<li><a href="#">title 3 title 3 title 3 title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 4 title 4 title 4 title 4 title 4 title 4</a><span>중앙일보</span></li>
							<li><a href="#">title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5</a><span>부산일보</span></li>
						</ul>
					</div>
				</div>

				<div class="news_main_wrap">
					<div class="news_main_header news_flex_between">
						<div class="news_main_header_left news_flex_start">
							<h3><a href="#">정치</a></h3>
							<ul class="news_flex_start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회 정당</a></li>
								<li><a href="#">청와대</a></li>
							</ul>					
						</div>

						<div class="news_main_header_right news_flex_end">
							<i class="icon_1"></i>
							<i class="icon_2"></i>
							<i class="icon_3"></i>
						</div>
					</div>

					<div class="news_main_body news_flex_start">
						<div class="image_wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news_lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
							<li><a href="#">title 2 title 2 title 2 title 2 title 2</a><span>한겨레</span></li>
							<li><a href="#">title 3 title 3 title 3 title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 4 title 4 title 4 title 4 title 4 title 4</a><span>중앙일보</span></li>
							<li><a href="#">title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5</a><span>부산일보</span></li>
						</ul>
					</div>
				</div>

				<div class="news_main_wrap">
					<div class="news_main_header news_flex_between">
						<div class="news_main_header_left news_flex_start">
							<h3><a href="#">정치</a></h3>
							<ul class="news_flex_start">
								<li><a href="#">일반</a></li>
								<li><a href="#">국회 정당</a></li>
								<li><a href="#">청와대</a></li>
							</ul>					
						</div>

						<div class="news_main_header_right news_flex_end">
							<i class="icon_1"></i>
							<i class="icon_2"></i>
							<i class="icon_3"></i>
						</div>
					</div>

					<div class="news_main_body news_flex_start">
						<div class="image_wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news_lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
							<li><a href="#">title 2 title 2 title 2 title 2 title 2</a><span>한겨레</span></li>
							<li><a href="#">title 3 title 3 title 3 title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 4 title 4 title 4 title 4 title 4 title 4</a><span>중앙일보</span></li>
							<li><a href="#">title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5</a><span>부산일보</span></li>
						</ul>
					</div>
				</div>

				<div class="news_main_wrap">
					<div class="news_main_header news_flex_between">
						<div class="news_main_header_left news_flex_start">
							<h3><a href="#">세계</a></h3>				
						</div>

						<div class="news_main_header_right news_flex_end">
							<i class="icon_1"></i>
							<i class="icon_2"></i>
							<i class="icon_3"></i>
						</div>
					</div>

					<div class="news_main_body news_flex_start">
						<div class="image_wrap">
							<img src="https://via.placeholder.com/220x140">
							<h4>[단독] 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록</h4>
						</div>

						<ul class="news_lists">
							<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
							<li><a href="#">title 2 title 2 title 2 title 2 title 2</a><span>한겨레</span></li>
							<li><a href="#">title 3 title 3 title 3 title 3</a><span>뉴시스</span></li>
							<li><a href="#">title 4 title 4 title 4 title 4 title 4 title 4</a><span>중앙일보</span></li>
							<li><a href="#">title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5 title 5</a><span>부산일보</span></li>
						</ul>
					</div>
				</div>
			</div>

#news_main .news_left .news_main_wrap {
	border-bottom: solid 1px #dedede;

	padding-top: 25px;
	padding-bottom: 25px;
}

#news_main .news_left .news_main_wrap .news_main_header {
	margin-bottom: 14px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left h3 {
	margin-right: 12px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left h3 a {
	font-size: 20px;
	font-weight: bold;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left ul {
	margin-top: -2px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left ul li a {
	font-size: 13px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left ul li a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 10px;
	background-color: #e5e5e5;

	vertical-align: -1px;

	margin: 0 8px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left ul li:first-child a:before {
	content: none;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_right i {
	display: block;

	width: 24px;
	height: 20px;

	margin-left: 8px;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_right i.icon_1 {
	background-color: yellow;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_right i.icon_2 {
	background-color: pink;
}

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_right i.icon_3 {
	background-color: grey;
}

#news_main .news_left .news_main_wrap .news_main_body .image_wrap {
	width: 220px;

	margin-right: 25px;
}

#news_main .news_left .news_main_wrap .news_main_body .image_wrap img {
	width: 100%;
	height: 140px;

	border: solid 1px #000000;

	margin-bottom: 6px;
}

#news_main .news_left .news_main_wrap .news_main_body .image_wrap h4 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font-size: 14px;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists {
	width: 430px;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists li {
	font-size: 19px;

	margin-bottom: 11px;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists li a {
	display: inline-block;

	max-width: 360px;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	vertical-align: middle;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists li span {
	font-size: 12px;
	color: #888888;

	vertical-align: middle;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists li span:before {
	position: relative;

	content: "";
	width: 14px;
	height: 11px;
	display: inline-block;
	background-color: grey;

	margin: 0 4px;

	top: 1px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_header ul li a {
	cursor: default;

	font-size: 12px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_header ul li:first-child a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 10px;
	background-color: #e5e5e5;

	vertical-align: -1px;

	margin: 0 8px 0 0;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .image_wrap {
	position: relative;
	width: 300px;
	height: 190px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .image_wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .image_wrap h4 {
	text-overflow: initial;
	white-space: initial;

	width: 100%;

	position: absolute;

	background-color: rgba(0, 0, 0, 0.5);

	left: 0;
	bottom: 0;

	color: #ffffff;
	text-align: center;

	padding: 10px 15px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .news_lists {
	width: 390px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .news_lists li a {
	width: 360px;

	vertical-align: middle;
	max-width: initial;

	margin-right: 5px;
}

#news_main .news_left .news_main_wrap.news_custom .news_main_body .news_lists li i {
	display: inline-block;

	width: 22px;
	height: 16px;

	background-color: black;

	vertical-align: middle;
}

[네이버 뉴스 메인 오른쪽 부분]

			<div class="news_right">
				<div id="news_popular">
					<div class="news_popular_header news_flex_between">
						<div>
							<h3>언론사별 가장 많이 본 뉴스</h3>
							<p>오후 11시 ~ 오전 12시까지 집계한 결과입니다.</p>
						</div>

						<span>더보기</span>
					</div>

					<ul class="news_popular_lists">
						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>

						<li class="news_flex_between">
							<div class="news_popular_info">
								<h4><a href="#">무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다. 무죄가 뒤집혀 졌다.</a></h4>
								<i></i><span>경향신문</span>
							</div>
							<img src="https://via.placeholder.com/88x60">
						</li>
					</ul>
				</div>

				<div class="news_banner"></div>

				<div id="news_today">
					<div class="new_today_header news_flex_start">
						<h3>TODAY</h3>
						<span>06.18 (금)</span>
					</div>

					<div class="news_today_body">
						<ul class="news_notice_lists">
							<li>
								<h4>공지</h4>
								<p>뉴스홈 헤드라인 비로그인 추천 변경</p>
							</li>
							<li>
								<h4>날씨</h4>
								<p>실시간 기상 정보 확인하기</p>
							</li>
							<li>
								<h4>운세</h4>
								<p>오늘의 띠별 운세 확인하기</p>
							</li>
						</ul>

						<div class="news_stock_wrap">
							<ul class="news_stock_lists news_flex_between">
								<li>
									<span>코스피</span>
									<h3>3,162.28</h3>
									<em class="down">10.77</em>
								</li>

								<li>
									<span>코스닥</span>
									<h3>971.13</h3>
									<em class="up">2.03</em>
								</li>
							</ul>

							<div class="news_stock_search_wrap news_flex_between">
								<input type="text" placeholder="종목검색">
								<button class="btn_search"></button>
							</div>
						</div>
					</div>
				</div>
			</div>

#news_main .news_right {
	float: right;
	
	width: 327px;

	border-left: solid 1px #dfdfdf;

	padding: 25px 0 40px 26px;
}

#news_main .news_right #news_popular {
	margin-bottom: 30px;
}

#news_main .news_right #news_popular .news_popular_header {
	align-items: flex-start;

	margin-bottom: 10px;
}

#news_main .news_right #news_popular .news_popular_header h3 {
	font-size: 13px;
}

#news_main .news_right #news_popular .news_popular_header p {
	font-size: 11px;
}

#news_main .news_right #news_popular .news_popular_header span {
	font-size: 13px;
	color: #d7d7d7;

	cursor: pointer;
}

#news_main .news_right #news_popular .news_popular_lists li {
	padding: 6px 0;
}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info {
	width: 202px;

	border-bottom: solid 1px #e3e3e3;

	padding-bottom: 6px;
}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info h4 {
	font-size: 13px;

	margin-bottom: 5px;
}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info i {
	display: inline-block;

	width: 16px;
	height: 16px;
	background-color: grey;
	border-radius: 50%;

	vertical-align: middle;

	margin-right: 5px;
}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info span {
	font-size: 12px;
	color: #888888;

	vertical-align: middle;
}

#news_main .news_right .news_banner {
	width: 300px;
	height: 250px;

	background-color: #000000;

	border: solid 1px #e3e3e3;

	margin-bottom: 30px;
}

#news_main .news_right #news_today .new_today_header {
	margin-bottom: 11px;
}

#news_main .news_right #news_today .new_today_header h3 {
	font-size: 14px;
}

#news_main .news_right #news_today .new_today_header span {
	font-size: 12px;
}

#news_main .news_right #news_today .new_today_header span:before {
	display: inline-block;
	content: "";
	width: 1px;
	height: 10px;
	background-color: #e5e5e5;

	vertical-align: -1px;

	margin: 0 7px;
}

#news_main .news_right #news_today .news_today_body {
	padding: 13px 20px 20px;
	border: solid 1px #e8e8e8;
}

#news_main .news_right #news_today .news_today_body .news_notice_lists {
	
}

#news_main .news_right #news_today .news_today_body .news_notice_lists li {
	border-bottom: solid 1px #f2f2f2;

	padding-bottom: 12px;
	margin-bottom: 12px;
}

#news_main .news_right #news_today .news_today_body .news_notice_lists li:first-child p {
	font-weight: bold;
}

#news_main .news_right #news_today .news_today_body .news_notice_lists li:last-child {
	margin-bottom: 0;
}

#news_main .news_right #news_today .news_today_body .news_notice_lists li h4 {
	display: inline-block;

	font-size: 12px;

	vertical-align: middle;

	margin-right: 8px;
}

#news_main .news_right #news_today .news_today_body .news_notice_lists li p {
	display: inline-block;

	font-size: 12px;

	vertical-align: middle;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists {
	padding: 10px 0 7px;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li {
	width: 50%;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li:last-child {
	border-left: solid 1px #f2f2f2;

	padding-left: 20px;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li span {
	font-size: 12px;
	color: #777777;

	margin-bottom: 8px;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li h3 {
	font-size: 24px;

	margin-bottom: 5px;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li em {
	font-style: normal;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li em.down {
	color: #066fd1;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_lists li em.up {
	color: #fe4638;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_search_wrap {
	width: 100%;
	height: 30px;

	border: solid 1px #f2f2f2;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_search_wrap input {
	width: calc(100% - 30px);
	height: 100%;

	background-color: #ffffff;

	border: none;

	padding: 3px 9px;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_search_wrap input:focus {
	outline: none;
}

#news_main .news_right #news_today .news_today_body .news_stock_wrap .news_stock_search_wrap .btn_search {
	width: 30px;
	height: 100%;
	background-color: black;
}

[네이버 뉴스 메인 하단 부분]

	<div id="news_nav_bottom">
		<div class="news_container news_flex_between">
			<ul class="news_flex_start">
				<li><a href="#">언론사 목록</a></li>
				<li><a href="#">분야별 목록</a></li>
			</ul>

			<a href="#">마이스크랩</a>
		</div>
	</div>

#news_main .news_left {
	float: left;

	width: 750px;

	padding-right: 26px;
	padding-bottom: 100px;
}

#news_nav_bottom {
	border-top: solid 1px #dfdfdf;
	border-bottom: solid 1px #e3e7ee;

	padding: 15px 0;
}

#news_nav_bottom ul li {
	margin-right: 10px;
}

학습내용 중 어려웠던 점

계속 반복해서 하다보니 따로 어려운점이 없었고 중간중간 코드 적용이 안되는 부분이 있었습니다.

해결방법

비슷하지만 필요한부분을 반복하니 대략적인 설계도를 그리는 방법과 선택자 작업이 어느정도 익숙해지고 있어서 이 부분이 적용이 안되면 어느 부분에서 적용이 안됬는지 조금더 빠르게 오류를 찾을수 있었습니다.

학습소감

뉴스 메인 부분에 왼쪽 부분은 반복적인 레이아웃 형태에 필요한 부분들만 수정해서 작업하면서 빠르게 작업을 할수 있었고 input 부분도 크기나 색상 테두리 이런거만 다르고 배치작업은 동일하고 다른부분도 비슷한 부분이 존재해서 기존보다 점점 빠르게 한페이지를 완성해 나가는거 같습니다.

Author And Source

이 문제에 관하여(2021.06.18 (네이버 뉴스 2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lstem12/2021.06.18-naver-news-2