네이버뉴스1

1)학습한내용

네이버

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

<header id="news_header">
	
	<div class="news_container">
		<div class="news_flex_between">
			<nav class="news_header_left">
				<ul class="news_flex_start">
					<li class="on"><a href="#">뉴스</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>

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

	<nav class="sub_nav">
		<div class="news_container">
			<div class="news_flex_between">
				<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>
				</ul>

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


<div id="news_headline">
	<div class="news_container">
		<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>

		<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>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</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>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</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>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</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>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</div>
							</div>
						</div>
					</article>
				</a>
			</li>
		</ul>

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



<main role="main" id="news_main">
	<div class="news_container">
		<div class="news_left">
			<h2>왼쪽(임시)</h2>
		</div>

		<div class="news_right">
			<h2>오른쪽(임시)</h2>
		</div>
	</div>
</main>

/ 뉴스 메임 /
.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;
align-items: center;
}

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

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

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

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

#news_header .news_header_left ul li.on {
font-size: 20px;
}

#news_header .news_header_left ul li a {
color: #ffffff;
}

#news_header .news_header_left ul li a:before {
display: inline-block;
content: '';
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 {
width: 55px;
height: 25px;
border: solid 1px #000000;

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

color: #ffffff;

font-size: 12px;

margin-right: 20px;

}

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

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

#news_header .sub_nav ul {

}

#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 2px transparent;

font-weight: bold;

line-height: 46px;

}

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

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

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

#news_headline {
padding-top: 20px;
}

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

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

#news_headline .news_headline_menu_wrap .main_lists {

}

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

font-size: 15px;

}

#news_headline .news_headline_menu_wrap .main_lists li a {

}

#news_headline .news_headline_menu_wrap .sub_lists {

}

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

#news_headline .news_headline_menu_wrap .sub_lists li a {

}

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

width: 1px;
height: 12px;
background-color: #e0e0e0;
margin: 0 5px;

vertical-align: -1px;

}

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

#news_headline .news_headline_lists {
margin-bottom: 12px;
}

#news_headline .news_headline_lists li {
width: 255px;
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 li a article h3 {
width: 100%;
height: 44px;
line-height: 44px;

text-align: center;

}

#news_headline .news_headline_lists li a article .image_wrap {
position: relative;
width: 100%;
height: 132px;
background-color: pink;
}

#news_headline .news_headline_lists li a article .image_wrap img {
position: absolute;
width: 100%;
height: 100%;
}

#news_headline .news_headline_lists li a article .image_wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#news_headline .news_headline_lists li a article .image_wrap .overlay .headline_info {
position: absolute;
width: 100%;
padding: 15px 20px;

left: 0;
bottom: 0;

color: #ffffff;

}

#news_headline .news_headline_lists .headline_info i {
display: block;
width: 26px;
height: 26px;
background-color: black;
border-radius: 50%;

margin-right: 10px;

}

#news_headline .news_headline_lists .headline_info div {
width: calc(100% - 38px);
}

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

#news_headline .news_headline_lists .headline_info p {
display: inline;
font-size: 12px;
}

#news_headline .news_headline_arrows {

}

#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.btn_prev {
background-color: yellow;
border-right: none;
}

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

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

#news_main .news_container {
overflow: hidden;
}

#news_main .news_left {
float: left;
width: 750px;
}

#news_main .news_right {
float: right;
width: 327px;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}
정렬과 관련된 class들을 미리 만들어 놓으면, 코드분량을 많이 줄일수 있다.

placeholder 는 input태그영역에 어떠한 정보를 기입해야되는지 사용자한테 알려주는 속성
ex)

< article > 태그는 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용

< article > 영역 안에는 무조건 타이틀 정보가 필요하다. h1~h6태그들 중에서 무조건 한가지가 들어가야 한다

javascript효과 멈추는법(현재 보고있는 페이지 내에서)
오른쪽 마우스 클릭 -> 검사 -> 오른쪽 톱니바퀴 -> preferences -> 하단으로 드래그 -> disable jabascript 체크

2) 학습내용 중 어려웠던 점
3) 해결 방법
4) 학습소감
집가고싶넹요