2021.07.20 Naver Main(第2編Cat)


きょうの講義


*ネイバーメインカメラ右側

  • 昨日に続いてNAVERホームページの作業が行われました

    videf-content:space-tweenを使用する場合は

  • float:leftを使用する場合
  • 証明-内容:空間-間が一致しない場合は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;
    }
  • 昨日のNAVERメインソースコードを除く右側の部分、下部のソースコード
  • 感想を述べる


    そして昨日はネイバーのメインカメラを作りました昨日やらなかった右、下の仕事を終えました.やはりソースコードが長くなって、小さな誤字が出て、進捗に影響しました.でも終わりの様子を見て、結果はとても良くて、自信があるようです.

    難点


    これまでソースコードを作成する際、コードが長すぎるとエラーが発生したり、削除する必要のある内容を削除せずにスキップしたりした結果、予想外の結果になるため、再確認してから作業することが多かった.

    改善案


    まず集中力が落ちているからでしょうか、ビデオ講義を見ながら作り直している画面を見ているという考えが生まれました.これも練習と繰り返しで、見逃した部分があっても、素早く修正することができる能力です.