2021.07.20네이버메인(2편 카피캣)

dogyeomyeo4444·2021년 7월 20일
대구AI스쿨
0

오늘의 강의 내용

* 네이버 메인 카피캣 오른쪽 부분

  • 어제에 이어서 네이버 메인 작업 진행

    justify-content: space-between 을 사용하였을때


float: left 을 사용하였을때

  • justify-content: space-between 으로 정렬이 되지 않을때에는 float: left 를 사용하여 정렬하는것을 권장


완성된 네이버메인 카피캣

<!-- html언어 -->
<div id="main_right">
			
			<div id="account">
				<p>네이버를 더 안전하고 편안하게 이용하세요</p>
				<a href="#">로그인</a>
				<div class="account_sub">
					<div class="left">
						<span>아이디</span>
						<span>비밀번호 찾기</span>
					</div>
					<span>회원가입</span>
				</div>
			</div>

			<div id="banner"></div>


			<div id="shop_wrap">
				
				<div class="shop_title">
					<h3><a href="#">트렌드 쇼핑</a></h3>

					<div class="right">
						<h4><a href="#">상품</a></h4>
						<h4><a href="#">쇼핑몰</a></h4>
						<h4><a href="#">MEN</a></h4>
					</div>
				</div>

				<div class="shop_contant">
					<ul class="commerce_lists">
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li>
						<li><a href="#">11번가</a></li> 
						<li><a href="#">11번가</a></li> 
					</ul>

					<div class="shop_goods">
						<ul class="product-lists">
							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>

							<li>
								<a href="#">
									<img src="https://via.placeholder.com/107x146">
									<div class="product-info">
										<h3>퀄리티가 중요한</h3>
										<span>당신을 위한 룩</span>
									</div>
								</a>
							</li>
						</ul>
					</div>

				</div>

			</div>

		</div>
	</main>



	<footer id="main_footer">
		<div class="container">
			
			<ul class="news_lists">
				<li>
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>
						SW 개발자를 위한 교육<br>
						지원꿀팁과 생생한 후기들!
						</p>
					</div>
				</li>

				<li>
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>
						SW 개발자를 위한 교육<br>
						지원꿀팁과 생생한 후기들!
						</p>
					</div>
				</li>

				<li>
					<img src="https://via.placeholder.com/160x86">
					<div class="news_info">
						<span>부스트캠프 2021</span>
						<h3>온라인 설명회 신청하기</h3>
						<p>
						SW 개발자를 위한 교육<br>
						지원꿀팁과 생생한 후기들!
						</p>
					</div>
				</li>
			</ul>

			<ul class="corp_lists">
				<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>
	</footer>
    
<!-- style.css언어 -->
#main_right #account {
	width: 100%;
	border: solid 1px #dae1e6;
	padding: 16px 16px 12px 16px;
	margin-bottom: 12px;
}

#main_right #account p {
	font-size: 12px;
	padding-left: 3px;
	margin-bottom: 11px;
}

#main_right #account a {
	display: block;
	width: 100%;
	background-color: #19ce60;
	border-radius: 2px;

	padding: 15px 0;
	margin-bottom: 14px;

	text-align: center;
	font-size: 13px;
	color: #fff;
	font-weight: 700px;
}

#main_right #account .account_sub {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	padding: 0px 8px;
}

#main_right #account .account_sub span {
	font-size: 12px;
}

#main_right #banner {
	width: 348px;
	height: 198px;
	background-color: #000000;

	margin-bottom: 20px;
}

#main_right #shop_wrap .shop_title {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 12px 0;
}

#main_right #shop_wrap .shop_title h3,
#main_right #shop_wrap .shop_title h4 {
	font-size: 13px;
}

#main_right #shop_wrap .shop_title h4 {
	margin-left: 15px;
}

#main_right #shop_wrap .shop_title .right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

#main_right #shop_wrap .shop_contant {
	border: solid 1px #e4e8eb;
	padding: 0 0 22px;
}

#main_right #shop_wrap .shop_contant .shop_goods {
	padding: 55px 8px;
}

#main_right #shop_wrap .shop_contant .commerce_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 12px 4px;
	background-color: #f7f9fa;
	border-bottom: solid 1px #dae1e6;
}

#main_right #shop_wrap .shop_contant .commerce_lists li {
	font-size: 12px;
	margin-left: 10px;
	margin-bottom: 5px;
}

#main_right #shop_wrap .shop_contant .commerce_lists li:nth-child(1),
#main_right #shop_wrap .shop_contant .commerce_lists li:nth-child(8) {
	margin-left: 0px;
}

#main_right #shop_wrap .product-lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#main_right #shop_wrap .product-lists li {
	margin-bottom: 10px;
}

#main_right #shop_wrap .product-lists .product-info {
	text-align: center;
}

#main_right #shop_wrap .product-lists h3,
#main_right #shop_wrap .product-lists span {
	font-size: 12px;
}


#main_footer {
	background-color: #fafbfc;
	border-top: solid 1px #e4e8eb;
	padding-bottom: 92px;
}

#main_footer .news_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	padding: 24px 0;
}

#main_footer .news_lists li {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

#main_footer .news_lists li img {
	margin-right: 15px;
}

#main_footer .news_lists li .news_info {
	width: 172px;
}

#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3,
#main_footer .news_lists li .news_info p {
	font-size: 13px;
}

#main_footer .news_lists li .news_info span {
	color: #58c464;
}

#main_footer .corp_lists {
	padding-top: 25px;
	border-top: solid 1px #e4e8eb;
}

#main_footer .corp_lists li {
	display: inline-block;
	vertical-align: middle;
}

#main_footer .corp_lists li:first-child:before {
	content: initial;
}

#main_footer .corp_lists li:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	background-color: #e4e8eb;
	margin: 0 8px;

	vertical-align: -1px;
}

#main_footer .corp_lists li a {
	font-size: 12px;
}
  • 어제의 네이버메인 소스코드를 제외 한 오른쪽 부분, 바닥부분의 소스코드

강의를 끝난후 소감

어제에 이어서 네이버메인 카피캣을 하였다. 어제 하지 않았던 오른쪽, 바닥 부분의 작업을 마무리 하였다. 역시 소스코드가 길어지니 자잘한 오타들이 나와서 진행에 차질을 주었다. 그래도 마무리 된 모습을 보니 결과물이 좋아서 자신감이 생긴것 같다.

힘든점, 문제점

아직까지는 소스코드 작성시에 코드가 길어지면 오타가 나오거나, 지워야할것을 지우지 않고 넘어가서 결과물이 엉뚱하게 나와 다시 확인후 작업하는 경우가 종종 나왔다.

개선방안

일단 집중력이 떨어져서 아닐까 하는 생각도 들고, 동영상강의 를 보면서 다시 작성중인 화면을 번갈아 보다보니 이런가 하는생각이 들었다. 이것도 연습과 반복뿐 설령 놓친부분이 있더라도 빠르게 수정하는 것도 능력이라 생각한다.

profile
dogyeomyeo4444
i will be the best
이전 포스트

2021.07.19 네이버메인(1편 카피캣)

다음 포스트

2021.07.21 네이버쇼핑1

0개의 댓글

관련 채용 정보