210720 개발일지

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

> 네이버 오른쪽 - 로그인창,배너

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

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

	padding: 0 8px;}

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

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

	margin-bottom: 20px;}
> 네이버 오른쪽 - 쇼핑창

-index.html
<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_content">
	<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>
		<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>
-style.css
#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_content 
	{border: solid 1px #e4e8eb;
	padding: 0 0 22px;}

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

#main_right #shop_wrap .shop_content .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_content .commerce-lists li 	
	{font-size: 12px;
	margin-left: 10px;
	margin-bottom: 5px;}

#main_right #shop_wrap .shop_content .commerce-lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce-lists li:nth-child(9) 
	{margin-left: 0;}


#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;}
> 네이버 하단

<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-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;}
2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

딱히 어려운점은 없었다
빠르게 하는게 힘든정도

3)해결방법 작성

열심히 강의를 보며 따라가면 될거같다

4)학습 소감

오늘도 열심히 들었다 내일도 열심히 들어야지

profile
juyoungkim
이전 포스트

210719 개발일지

다음 포스트

210721 개발일지

0개의 댓글

관련 채용 정보