7월 29일 Velog

학습한 내용

네이버 뉴스 실습

https://news.naver.com/main/home.naver

0. Default

[css]

.news_container {
	width: 1080px;
	margin: 0 auto;
}

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

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

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

• news_flex_between 로 space-between의 속성값을 가진 flex 코드를 클래스화 시킨다.
  -> 좌우정렬시 사용

• news_flex_start, news_flex_end 로 flex-start, flex-end 의 속성값을 가진 flex 코드를 클래스화 시킨다.
  -> li 태그 x축 정렬시에 ul 태그에 넣어서 사용

1. Header

구조

[html]

	<header id="news_header">

		<div class="news_container">
			<div class="news_flex_between">	
				<nav class="news_header_left"></nav>
				<div class="news_header_right"></div>
			</div>
		</div>


		<nav class="sub_nav"></nav>

	</header>

[css]

#news_header {
	background-color: #3f63bf;
}

• header 전체에 색상을 적용하고 sub.nav 영역에 화이트 색상을 넣는다.

(1) news header left / right

[html]

		<div class="news_container">
			<div class="news_flex_between">	

				<nav class="news_header_left">
					<ul class="news_flex_start">
						<li><a href="#">NAVER 뉴스</a></li>
						<li><a href="#">TV연예</a></li>
						<li><a href="#">스포츠</a></li>
						<li><a href="#">뉴스스탠드</a></li>
						<li><a href="#">날씨</a></li>
					</ul>
				</nav>


				<div class="news_header_right news_flex_end">
					<a href="#" class="btn_login">로그인</a>
					<button type="button" class="btn_menu"></button>
				</div>

			</div>
		</div>

[css]

#news_header .news_header_left {
	padding-top: 17px;
	padding-bottom: 17px;
}

#news_header .news_header_left ul li a {
	color: #ffffff;
	font-size: 15px;
}

#news_header .news_header_left ul li:first-child a {
	font-size: 20px;
	font-weight: 700;
}

#news_header .news_header_left ul li a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 15px;
	background-color: #000;
	opacity: 0.2;

	margin: 0 10px;

	vertical-align: -1px;
}

#news_header .news_header_left ul li:first-child a:before {
	content: none;
}


#news_header .news_header_right .btn_login {
	display: block;

	width: 55px;
	height: 25px;
	border: solid 1px #000000;

	line-height: 25px;
	text-align: center;

	color: #ffffff;
	font-size: 12px;
}

#news_header .news_header_right .btn_menu {
	width: 55px;
	height: 55px;
	background-color: transparent;
	border-right: solid 1px #000000;
	border-left: solid 1px #000000;

	cursor: pointer;

	margin-left: 20px;
}

(2) sub nav

[html]

		<nav class="sub_nav">
				<div class="news_flex_between news_container">

					<ul class="news_flex_start">
						<li><a href="#" class="on">뉴스홈</a></li>
						<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>
						<li><a href="#">세계</a></li>
					</ul>


					<div class="news_search_wrap news_flex_between">
						<input type="text" placeholder="뉴스 검색">
						<button type="button" class="btn_search"></button>
					</div>

			</div>
		</nav>

• <input type="text" placeholder="어떤 정보를 기입해야 하는지 사용자에게 알려줌“>

[css]

#news_header .sub_nav {
	background-color: #ffffff;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #e3e3e3;
}

#news_header .sub_nav ul li {
	width: auto;
	height: 46px;

	margin-right: 16px;
}

#news_header .sub_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	border-bottom: solid 3px transparent;

	font-weight: bold;
	line-height: 46px;
}

#news_header .sub_nav ul li a.on {
	border-bottom: solid 3px #3f63bf;

	color: #3f63bf;
}

#news_header .sub_nav .news_search_wrap {
	width: 280px;
	height: 30px;
	background-color: #fafafa;
	border: solid 1px #e1e1e1;
}

#news_header .sub_nav .news_search_wrap input {
	width: calc(100% - 30px);
	height: 100%;
	border: none;

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

	padding: 3px 9px;
}

#news_header .sub_nav .news_search_wrap input:focus {
	outline: none; -> 클릭을 했을 때 아웃라인이 생기지 않게 한다.
}

#news_header .sub_nav .news_search_wrap .btn_search {
	width: 30px;
	height: 100%;
	background-color: #3f63bf;
}

2. Healine

구조

[html]

	<div id="news_headline">
		<div class="news_container">

			<div class="news_headline_menu_wrap"></div>
			<ul class="news_headline_lists"></ul>
			<div class="news_headline_arrows"></div>

		</div>
	</div>

[css]

#news_headline {
	padding-top: 20px;	
}

#news_headline .news_container {
	border-bottom: solid 1px #000000;

	padding-bottom: 12px;
}

(1) news headline menu

[html]

			<div class="news_headline_menu_wrap news_flex_between">				
				<ul class="main_lists news_flex_start">
					<li><a href="#">신문 헤드라인</a></li>
					<li><a href="#">저녁 방송 뉴스</a></li>
				</ul>

				<ul class="sub_lists news_flex_end">
					<li><a href="#">팩트체크</a></li>
					<li><a href="#">언론사 구독</a></li>
					<li><a href="#">언론사 뉴스</a></li>
					<li><a href="#">라이브러리</a></li>
				</ul>
			</div>

[css]

#news_headline .news_headline_menu_wrap {
	margin-bottom: 15px;
}

#news_headline .news_headline_menu_wrap .main_lists li {
	margin-right: 20px;
}

#news_headline .news_headline_menu_wrap .main_lists li a {
	font-size: 15px;
}


#news_headline .news_headline_menu_wrap .sub_lists li a {
	font-size: 12px;
}

#news_headline .news_headline_menu_wrap .sub_lists li a:before {
	content: "";
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: #c0c0c0;

	vertical-align: -1px;

	margin: 0 5px;
}

#news_headline .news_headline_menu_wrap .sub_lists li:first-child a:before {
	content: none;
}

(2) news headline lists

[html]

			<ul class="news_headline_lists news_flex_between">
				<li>
					<a href="#">					
						<article>
							<h3>TV조선 뉴스9</h3>							
							<div class="image_wrap">
								<img src="https://via.placeholder.com/150">

								<div class="overlay">
									<div class="headline_info news_flex_start">
										<i></i>										
										<p><span>다시보기</span>또 뛰는 집값... 2.4 대책 직전으로 돌아갔다.</p>										
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">					
						<article>
							<h3>TV조선 뉴스9</h3>							
							<div class="image_wrap">
								<img src="https://via.placeholder.com/150">

								<div class="overlay">
									<div class="headline_info news_flex_start">
										<i></i>										
										<p><span>다시보기</span>또 뛰는 집값... 2.4 대책 직전으로 돌아갔다.</p>										
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">					
						<article>
							<h3>TV조선 뉴스9</h3>							
							<div class="image_wrap">
								<img src="https://via.placeholder.com/150">

								<div class="overlay">
									<div class="headline_info news_flex_start">
										<i></i>										
										<p><span>다시보기</span>또 뛰는 집값... 2.4 대책 직전으로 돌아갔다.</p>										
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
				<li>
					<a href="#">					
						<article>
							<h3>TV조선 뉴스9</h3>							
							<div class="image_wrap">
								<img src="https://via.placeholder.com/150">

								<div class="overlay">
									<div class="headline_info news_flex_start">
										<i></i>										
										<p><span>다시보기</span>또 뛰는 집값... 2.4 대책 직전으로 돌아갔다.</p>										
									</div>
								</div>
							</div>
						</article>
					</a>
				</li>
			</ul>

[css]

#news_headline .news_headline_lists {

}

#news_headline .news_headline_lists li {
	width: 225px;
	height: 178px;
	border: solid 1px #ccc;
}

#news_headline .news_headline_lists li a {
	display: block;

	width: 100%;
	height: 100%;
}

#news_headline .news_headline_lists li a article {
	position: relative;

	width: 100%;
	height: 100%;
}

#news_headline .news_headline_lists h3 {
	width: 100%;
	height: 44px;

	text-align: center;
	line-height: 44px;
}

#news_headline .news_headline_lists .image_wrap {
	position: relative;

	width: 100%;
	height: 132px; -> (전체 178) - (border 2) - (h3 44) = 132
}

#news_headline .news_headline_lists .image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#news_headline .news_headline_lists .image_wrap .overlay {
	position: absolute;

	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#news_headline .news_headline_lists .image_wrap .overlay .headline_info {
	position: absolute;

	width: 100%;

	padding: 15px 20px;
	left: 0;
	bottom: 0;
	/*부모가 순수 3차원일 때 자식이 3차원이면 부모 영역을 기준으로 좌표가 이동한다.*/

	color: #ffffff;
}

#news_headline .news_headline_lists .image_wrap .overlay .headline_info i {
	display: block; -> 공간의 크기 만듦

	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;
}

#news_headline .news_headline_lists .image_wrap .overlay .headline_info p {
	width: calc(100% - 38px);
	/*전체에서 i 태그의 width 값과 margin 값 +a 하여 빼서 계산한다.*/
	font-size: 12px;
}

#news_headline .news_headline_lists .image_wrap .overlay .headline_info p span {
	font-size: 13px;
	font-weight: bold;
}

(3) news headline arrows

[html]

			<div class="news_headline_arrows news_flex_end">
				<div class="btn_wrap news_flex_start">
					<a href="#" class="btn btn_prev"></a>
					<a href="#" class="btn btn_next"></a>
				</div>
				<a href="#" class="btn btn_up"></a>
			</div>

[css]

#news_headline .news_headline_arrows {
	margin-top: 12px;
}

#news_headline .news_headline_arrows .btn_wrap {
	margin-right: 15px;
}

#news_headline .news_headline_arrows .btn {
	display: block;

	width: 24px;
	height: 24px;
	border: solid 1px #dcdddc;
}

#news_headline .news_headline_arrows .btn_wrap .btn.btn_prev {
	background-color: yellow;
	border-right: none; -> 공유하는 border 제거
}

#news_headline .news_headline_arrows .btn_wrap .btn.btn_next {
	background-color: pink;
}

#news_headline .news_headline_arrows .btn.btn_up {
	background-color: black;
}	

※ box-sizing:border;는 하위버전에서 호환되지 않는다.

TIP

사이트의 자바 스크립트에 의한 효과를 해제하고 싶을 때 개발자도구의 설정에서 Disable JavaScript를 선택한다.