210719 개발일지

juyoungkim·2021년 7월 19일
0
1) 학습한 내용
국내외 사이트 카피캣 (네이버 메인 1편)

> 검색창

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

	</div>
- style.css
#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;}
> 네이버 상단


- index.html

<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="#">쇼핑</a></li>
			</ul>

		</div>
	</div>
> 네이버 왼쪽

- index.html
<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>

<div id="main_right">
			
</div>
</main>
- style.css
#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;}

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

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: grey;}


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: grey;}

main #blog_wrap .blog_header .right_header .count strong {color: #000000;}

main #blog_wrap .blog_nav ul {overflow: hidden;
	border: solid 1px #eae1e6;}

main #blog_wrap .blog_nav ul li {float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;}

main #blog_wrap .blog_nav ul li:last-child {
	border-right: 0;}

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: #35ae5e}

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

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

중간중간 오탈자때문에 조금 고생했다

3)해결방법 작성

강의를 다시 돌려보고 예제파일과 같이 확인하여 수정하는것

4)학습소감

7월 3째주 첫날부터 네이버로 홈페이지를 만들게 되었다
신기하고 좀 힘들기도하다
힘내장

profile
juyoungkim
이전 포스트

210716 개발일지

다음 포스트

210720 개발일지

0개의 댓글

관련 채용 정보