개발일지 18일차

학습 내용

• 네이버 뉴스 메인 header

  news.html

<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>
					<button type="button" class="btn-menu"></button>
				</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>

style.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;
	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 {
	display: block;
	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: #3f63df;
	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 {
	padding-bottom: 12px;
	border-bottom: solid 1px #000000;
}
#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 {
	display: inline-block;
	content: '';
	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;
}
#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 div {
	width: calc(100% - 38px);
}
#news-headline .news-headline-lists .headline-info i {
	display: block;
	width: 26px;
	height: 26px;
	background-color: #000000;
	border-radius: 50%;
	margin-right: 10px;
}
#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;
}

결과

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

headline 영역에서 이미지, overlay, 텍스트, 아이콘이 z축으로 나열되어있어서 공간 정렬 작업이 어려웠다.

해결 방법

강의를 순차적으로 따라가면서 복기했다.

학습 소감

position 공부를 다시 할 수 있는 좋은 시간이었다.