네이버메인 - 2

배성현·2021년 9월 17일
0

1) 학습한 내용

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

float: left 을 사용하였을때

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

네이버를 더 안전하고 편안하게 이용하세요

로그인
		<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>

#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;
}
2) 학습내용 중 어려웠던 점
머리부터발끝까지 핫이슈 핫 너무어렵네요
3) 해결 방법
복습만으로도 해결안될것같은 기분이에요
4) 학습소감
집중력이 전보다 더 떨어진 거 같고 막 그래요 어려워요 복잡해요 눈에 안들어와요

0개의 댓글