2021.07.30네이버뉴스2

dogyeomyeo4444·2021년 7월 30일
대구AI스쿨
0

오늘의 강의 내용

* 네이버뉴스 상단 작업이후 나머지 카피캣 작업

카피캣할 네이버뉴스 나머지 부분

네이버뉴스 나머지 왼쪽, 오른쪽 하단부 카피캣 완료된 모습

<!-- news.html -->
<main role="main" id="news_main">
		<div class="news_container">
			<div class="news_left">
				
				<div class="news_main_wrap news_custome">
					<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</a><i></i></li>
							<li><a href="#">title 2 title 2 title 2 title 2 </a><i></i></li>
							<li><a href="#">title 3 title 3 title 3 </a><i></i></li>
							<li><a href="#">title 4 title 4 </a><i></i></li>
							<li><a href="#">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</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 title 3</a><span>뉴시스</span></li>
							<li><a href="#">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</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</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 title 3</a><span>뉴시스</span></li>
							<li><a href="#">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</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</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 title 3</a><span>뉴시스</span></li>
							<li><a href="#">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</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</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 title 3</a><span>뉴시스</span></li>
							<li><a href="#">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</a><span>부산일보</span></li>
						</ul>
					</div>	
				</div>



			</div>

			




			<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>
					</ul>				
				</div>

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


				<div id="news_today">

					<div class="news_today_header news_flex_start">
						<h3>TODAY</h3>
						<span>05.21 (금)</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="" placeholder="종목 검색">
								<button type="button" class="btn_search"></button>
							</div>
						</div>
					</div>
					
				</div>






			</div>
		</div>
	</main>



	<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>
    
<!-- style.css언어 -->
#news_main .news_left {
	float: left;
	width: 750px;
	padding-right: 26px;
	padding-bottom: 100px;
}

#news_main .news_left .news_main_wrap {
	padding-top: 25px;
	padding-bottom: 25px;
	border-bottom: solid 1px #dedede;
}

#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 {
	
}

#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 a {
	font-size: 11px;
}

#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 li a:before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 10px;
	background-color: #e5e5e5;

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

#news_main .news_left .news_main_wrap .news_main_header .news_main_header_left 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: gray;
}

#news_main .news_left .news_main_wrap .news_main_body {

}

#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: 13px;
}

#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 {
	margin-bottom: 11px;
	font-size: 20px;
}

#news_main .news_left .news_main_wrap .news_main_body .news_lists li a {
	display: inline-block;
	max-width: 360px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	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 {
	content: '';
	position: relative;
	display: inline-block;
	width: 14px;
	height: 11px;
	background-color: gray;

	margin: 0 4px;

	top: 1px;
}

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

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

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

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

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

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

	position: absolute;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);

	padding: 10px 15px;

	left: 0;
	bottom: 0;

	color: #ffffff;
	text-align: center;
}

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

#news_main .news_left .news_main_wrap.news_custome .news_main_body .news_lists li a {
	vertical-align: middle;
	width: 360px;
	max-width: initial;
}

#news_main .news_left .news_main_wrap.news_custome .news_main_body .news_lists li i {
	display: inline-block;
	width: 22px;
	height: 16px;
	background-color: black;

	vertical-align: middle;
}

#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 {
	color: #7d7d7d;
	font-size: 13px;
	cursor: pointer;
}

#news_main .news_right #news_popular .news_popular_lists {

}

#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 h4 a {

}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info i {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: gray;
	border-radius: 50%;

	vertical-align: middle;
	margin-right: 5px;
}

#news_main .news_right #news_popular .news_popular_lists li .news_popular_info span {
	position: relative;

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

	vertical-align: middle;

	top: 2px;
}

#news_main .news_right #news_popular .news_popular_lists li img {

}

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

}

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

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

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

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

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

#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: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_lists {
	padding: 10px 0 7px;
}

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

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

#news_main .news_right #news_today .news_today_body .news_stock_lists span {
	font-size: 12px;
	color: #777777;
	margin-bottom: 8px;
}

#news_main .news_right #news_today .news_today_body .news_stock_lists h3 {
	font-size: 24px;
	margin-bottom: 5px;
}

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

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

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

#news_main .news_right #news_today .news_today_body .news_stock_search_wrap {
	width: 100%;	
	height: 30px;
	border: solid 1px #f2f2f2;
}

#news_main .news_right #news_today .news_today_body .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_search_wrap input:focus {
	outline: none;
}

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

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

	padding: 15px 0;
}

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

  • 사이트작업시에 공통된 요소를 뽑아내고, 공통된 요소의 css배치작업을 할때에 하나에 요소의 커스텀작업을 하더라도, 기본 레이아웃에 변함이 없게 셋팅을 하는것이 중요하다.

  • position 연습이나, flex연습을 많이 하는것이 중요하다.

  • cursor: default 커서모양을 손가락에서 화살표로 변환할때 사용

강의를 끝난후 소감

이번 네이버뉴스 를 카피하면서 강사님과 결과가 다르게 나왔을때 스스로 문제를 풀었던적이 많아 공부가 많이 되었다.

힘든점, 문제점

강사님과 네이버뉴스는 mac으로 작업이 되어있어, window와 서체의 default값이 달라 font size값에 변화를 주어야 해서 작업이 딜레이 되었다.

개선방안

강사님과 똑같은 수치를 넣었을 때는 똑같은 결과를 도출하기 힘들어 임의 의 숫자로 결과를 만들어 내어 완료하였다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.07.29네이버뉴스1

다음 포스트

네이버 모바일 1

0개의 댓글