개발일지 11일차

학습 내용

• 네이버 우측 / 하단

  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>
			
			<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>
					</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: inline-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: 388px;
	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_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-around;
	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(8) {
	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: 12px;
}
#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;
	margin: 0 8px;
	background-color: #e4e8eb;
	vertical-align: -1px;
}
#main-footer .corp_lists li a {
	font-size: 12px;
}

결과
네이버 우측

네이버 하단

학습한 내용 중 어려웠던 점 또는 해결못한 것들

네이버 상단 commerce-lists 부분에서 li 부분을 flex로 정렬 시켰는데 배치가 어긋나는 문제가 발생되어 해결하지 못하는 중.

해결법 작성

아직 미해결. 계속 문제 해결 시도 중
-> 폰트 사이즈 축소 후 해결

학습 소감

코드 작성시 항상 오타의 문제로 잦은 코드 오류 발생이 일어나 많은 에로사항이 발생하는 것을 주의해야겠다.