개발일지 10일차

이재경·2021년 6월 7일
0

학습 내용

  • 네이버 상단 / 네이버 왼쪽

    index.html

<header id="main-header">
		<div class="search_area">
			
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</div>

		</div>

		<div id="navbar">
			<div class="container">
				
				<ul>
					<li><a href="#">메일</a></li>
					<li><a href="#">카페</a></li>
					<li><a href="#">블로그</a></li>
					<li><a href="#">지식인</a></li>
					<li><a href="shop.html">쇼핑</a></li>
					<li><a href="webtoon.html">웹툰</a></li>
				</ul>

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

	<main role="main" class="container">
		<div id="main_left">
			
			<div id="banner_wrap"></div>

			<div id="news_wrap">
				
				<div class="news_header">
					<h2>뉴스스탠드</h2>
					<div class="news_btn_wrap">
						<button class="setting_1"></button>
						<button class="setting_2"></button>
						<button class="setting_3"></button>
					</div>
				</div>

				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
					<li class="news_list">
						<img src="https://via.placeholder.com/45x20">
					</li>
				</ul>

			</div>


			<div id="blog_wrap">
				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>
					<div class="right_header">
						<span class="count"><strong>1,853</strong> 개의 글</span>
						<span>관심주제 설정</span>
					</div>
				</div>

				<nav class="blog_nav">
					<ul>
						<li><a href="#">엔터1</a></li>
						<li><a href="#">엔터2</a></li>
						<li><a href="#">엔터3</a></li>
						<li><a href="#">엔터4</a></li>
						<li><a href="#">엔터5</a></li>
						<li><a href="#">엔터6</a></li>
						<li><a href="#">엔터7</a></li>
						<li><a href="#">엔터8</a></li>
					</ul>
				</nav>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>

				<div class="blog_list_wrap">
					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/170x114">
								<div class="blog_list_info">
									<span>경제M</span>
									<h4>Title</h4>
									<p>
									복잡한 도시를 떠나 공기도 좋으면서 마당이 있는 전원주택에서 살고 싶다는 생각은 누구나 한 번쯤 해보셨을 겁니다. 하지만 막상 전원주택에 1~2년만 살아보면 전원주택에 대한 모든 환상과 로망이 깨진다고 하는데요. 전원주택을 팔고 다시 도시로 오는 사람들은 관리의 어려움과 지역주민의 텃세로 인한 마찰로 인해 어려움을 겪으면서 전원주택에 대한 회의감이 들어
									</p>

									<div class="date-wrap">
										<span>뉴스얌</span>
										<span>4일 전</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div class="blog_media_wrap">
					<ul>
						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>

						<li>
							<img src="https://via.placeholder.com/232x130">
							<div class="blog_media_info">
								<h4>Title</h4>
								<span>신사임당</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: #000000;
}
img {
	vertical-align: middle;
}
button {
	border: none;
}
input, textarea {
	outline: none;
}
.clearfix {
	clear: both;
}
.container {
	width: 1130px;
	margin: 0 auto;
}
#main-header {
	position: relative;
	background-color: #ffffff;
}
#main-header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 160px;
	background-color: #ffffff;
	border-bottom: 1px solid #e4e8eb;
}
#main-header .search_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}
#main-header .search_wrap input {
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px 15px;
	font-size: 22px;
	border: none;
}
/* 테두리 속성 */
#main-header .search_wrap input:focus {
	outline: none;
}
#main-header .search_wrap button {
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}
#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0, 0, 0 / 12%);
}
#main-header #navbar ul {
	padding: 11px 0;
}
/* li태그를 하나의 라인선상으로 배치 */
#main-header #navbar ul li {
	display: inline-block;
	margin-right: 5px;
}
#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}
main {
	overflow: hidden;
	padding-top: 20px;
}
main #main_left {
	float: left;
	width: 750px;
}
main #main_right {
	float: right;
	width: 350px;
	height: 2000px;
	background-color: pink;
}
main #banner_wrap {
	width: 750px;
	height: 135px;
	background-color: #000000;
	margin-bottom: 12px;
}
main #news_wrap .news_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0 16px 0;
}
main #news_wrap .news_header h2 {
	font-size: 14px;
	font-weight: 700px;
}
main #news_wrap .news_header .news_btn_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	width: 60px;
}
main #news_wrap .news_header .news_btn_wrap button {
	width: 15px;
	height: 15px;
	background-color: blue;
}
main #news_wrap .news_lists {
	overflow: hidden;
	border: solid 1px #dae1e6;
}
main #news_wrap .news_lists .news_list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;
	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;
	text-align: center;
}
main #news_wrap .news_lists .news_list:nth-child(6n) {
	border-right: none;
}
main #news_wrap .news_lists .news_list:nth-child(19),
main #news_wrap .news_lists .news_list:nth-child(20),
main #news_wrap .news_lists .news_list:nth-child(21),
main #news_wrap .news_lists .news_list:nth-child(22),
main #news_wrap .news_lists .news_list:nth-child(23),
main #news_wrap .news_lists .news_list:nth-child(24) {
	border-bottom: none;
}
main #news_wrap .news_lists .news_list img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
main #blog_wrap {
	padding-top: 35px;
}
main #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 17px;
}
main #blog_wrap .blog_header .left_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
main #blog_wrap .blog_header .left_header h3 {
	font-size: 14px;
	margin-right: 8px;
}
main #blog_wrap .blog_header .left_header span {
	font-size: 12px;
	color: gray;
}
main #blog_wrap .blog_header .right_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
main #blog_wrap .blog_header .right_header span {
	font-size: 12px;
	color: gray;
}
main #blog_wrap .blog_header .right_header .count strong {
	color: #000000;
}
main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border: solid 1px #dae1e6;
}
main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #dae1e6;
}
main #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;
}
/* 우리가 만든 공간의 높이값이 있는 경우 
line-height를 적용하면 y축 중앙정렬효과를 가진다. */
main #blog_wrap .blog_nav ul li a {
	display: block; 
	width: 100%;
	height: 100%;
	line-height: 49px;
	text-align: center;
}
main #blog_wrap .blog_list_wrap {
	padding-top: 18px;
	border-bottom: solid 1px #dae1e6;
}
main #blog_wrap .blog_list_wrap li {
	margin-bottom: 18px;
}
main #blog_wrap .blog_list_wrap li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
main #blog_wrap .blog_list_wrap li img {
	width: 170px;
	height: 114px;
	margin-right: 21px;
}
main #blog_wrap .blog_list_wrap li .blog_list_info {
	width: 559px;
	padding-right: 47px;
}
main #blog_wrap .blog_list_wrap li .blog_list_info span {
	font-size: 12px;
	color: #34ae5e;
}
main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
	font-size: 13px;
}
main #blog_wrap .blog_list_wrap li .blog_list_info p {
	font-size: 13px;
}
main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {
	color: #505050;
}
main #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	border-bottom: solid 1px #dae1e6;
}
main #blog_wrap .blog_media_wrap ul .blog_media_info {
	padding-top: 12px;
}
main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
	font-size: 13px;
}
main #blog_wrap .blog_media_wrap ul .blog_media_info span {
	font-size: 12px;
}

결과

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

flex를 이용한 x축 공간 정렬, margin,padding을 이용한 공백 관리, 가상 선택자를 이용하여 검색창의 border 정리

해결법 작성

flexbox.help 사이트를 이용하여 flex 문제 해결, 개발자 도구를 이용하여 position, margin, padding, border, color등을 확인하여 적용

학습 소감

개발자 도구를 자주 사용하여 익숙해질 때까지 사용한다면 레이아웃 배치에 큰 도움이 될 것 같다.

profile
이재경
I'm Closer
이전 포스트

개발일지 9일차

다음 포스트

개발일지 11일차

0개의 댓글