2021.06.17 (네이버 뉴스 1)

학습한 내용

[네이버 뉴스 상단 부분]

	<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>
.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;
	font-weight: 700;
}

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

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

	margin-right: 20px;
}

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

	background-color: #3f63bf;
}

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

	line-height: 46px;

	font-weight: bold;
}

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

	<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="new_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>
#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 li {
	font-size: 15px;

	margin-right: 20px;
}

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

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

#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 li a article .image_wrap .overlay .headline_info div {
	width: calc(100% - 38px);
}

#news_headline .news_headline_lists li a article .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 li a article .image_wrap .overlay .headline_info span {
	font-size: 13px;
	font-weight: bold;
}

#news_headline .news_headline_lists li a article .image_wrap .overlay .headline_info p {
	display: inline;

	font-size: 12px;
}

#news_headline .new_headline_arrows {

}

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

#news_headline .new_headline_arrows .btn {
	display: block;

	width: 24px;
	height: 24px;

	border: solid 1px #dcdddc;
}

#news_headline .new_headline_arrows .btn_prev {
	background-color: yellow;

	border-right: none;
}

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

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

[네이버 뉴스 메인 부분]

	<main role="main" id="news_main">
		<div class="news_container">
			<div class="news_left">
				<h2>left test</h2>
			</div>

			<div class="news_right">
				<h2>right test</h2>
			</div>
		</div>
	</main>
#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;
}

학습내용 중 어려웠던 점

news_headline 부분의 overlay부분이 다른 부분에 비해서 조금 어려운 부분 있었습니다. 그리고 아직 어느 태그가 inline이고 block인지 햇갈리는 부분이 있었습니다.

해결방법

처음에는 이해가 조금 어려웠지만 positon부분에 대해 생각해보니 부모 부분은 relative로 지정하고 하위 자식부분들을 absolute로 지정해 같은 3차원 자식이면 가장 나중에 작성한 것이 가장 위에 올라오는 형식을 이용해 img부터 처리하고 그 위에 overlay를 덮고 마지막으로 headline_info까지 absolute로 지정해 가장 위에 배치하는 형태로 차근차근 따라가니 해결에 도움이 되었습니다.

inline block 부분은 많은 태그들에 대해 계속 배치해보거나 검색해서 찾아보는 식으로 알아가야 할거 같습니다.

학습소감

자주 사용하는 코드들을 따로 클래스로 빼두고 필요한 곳에 클래스명만 적어서 적용하는 식으로 작업을 하니 코드의 길이가 점점 짧아지고 코드의 재사용이 줄어들어 보다 편하게 작업 했습니다.
flexbox정도만 빼서 사용했지만 나중가면 다양한 코드를 클래스로 빼서 코드를 보다 간소화 시킬수 있을거라 생각합니다.

[알고리즘] Disjoint Set & Union Find
[제주코딩베이스캠프] Day-3 웹 서비스 (개발 입문자)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage