2021_07_19개발일지

Yeo Eunhye·2021년 7월 19일
개발일지
0

1) 학습한 내용

오늘은 네이버 페이지를 만들어 보았다.
그중 왼쪽과 오른쪽으로 나누어 오늘은 왼쪽영역을 만들어보았다.

1. header

html -

	<!-- 확장프로그램 참고 사이트!
		https://wpastra.com/chrome-developer-extensions/#11-wappalzer -->



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

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

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




/* Header */
#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);
	/*띄어쓰기 잘 작성, 공백 까지 간격으로 인식을 하기 때문에
	display flax 사용*/
	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;
}
/* free icon 다운으로 연습하기 */

#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
	/* shadow 참고 사이트!
	https://cssgenerator.org/box-shadow-css-generator.html*/
}

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

2. main left -news

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>
						<!-- button type 을 입력하지 않을경우 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>
						<!-- strong 글자 굵게 -->
						<span>관심주제 설정</span>
					</div>
				</div>

css -

/* Main - left*/

/* news */

main {
	overflow: hidden;
	padding-top: 20px;
	/*header 부분에 마진 바텀을 써서 공백을 만들 수 도 있다.*/
}

main #main_left {
	float: left;
	width: 750px;

	background-color: yellow;
}

main #main_right {
	float: right;
	width: 350px;
	height: 2000px;

	background-color: pink;
}

main #banner_wrap {
	width: 750px;
	height: 135px;
	background-color: #000000;

	margin-bottom: 12;
}

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%;
	/*100을 6개로 쪼갰을때*/
	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)
/*main #news_wrap .news_lists .news_list:nth-child(6)
main #news_wrap .news_lists .news_list:nth-child(12)
main #news_wrap .news_lists .news_list:nth-child(18)
main #news_wrap .news_lists .news_list:nth-child(24)*/ {
	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%);
}

3. main left -blog

html -

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

css -

/* blog */

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) 학습내용 중 어려웠던 점 및 해결방법

마지막 부분에 html이 반복적으로 나와 아무래도 코드가 길어졌는데, 그때 내가 열림태그와 닫힘태그를 제대로 작성하지 않아 다시 찾아보는 과정에서 조금 어려웠다.
그래서 패키지를 다운받아 태그를 선택하면 어느부분의 닫힘과 열림인지 표시가 되도록 하여 조금 쉽게 찾을 수 있었다.

3) 학습소감

처음에 시작할때는 버튼부분 로그인 부분 메뉴부분등 한영역만 선택하여 레이아웃을 진행하였는데, 오늘은 이렇게 페이지 전체를 레이아웃하게 되니 조금 느낌이 이상했다.
항상 사용해오던 네이버 페이지를 내가 카피캣 할줄은 생각도 못했는데, 어느새 완벽하진 않아도 어느정도 레이아웃을 잡을 수 있다는 게 뿌듯하고 재밌었던것 같다 :)

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_07_16 개발일지

다음 포스트

2021_07_ 20개발일지

0개의 댓글