2021.06.08 (네이버 메인 2편)

이상화·2021년 6월 8일
0

학습한 내용

[네이버 오른쪽 부분]

		<!-- 네이버 오른쪽 부분 -->
		<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>
#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;
}

			<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_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 .right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;	
}

#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_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(8) {
	margin-left: 0;
}

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

#main_right #shop_wrap .shop_content .product_lists li {
	margin-bottom: 10px;
}

#main_right #shop_wrap .shop_content .product_lists .product_info {
	text-align: center;
}

#main_right #shop_wrap .shop_content .product_lists h3,
#main_right #shop_wrap .shop_content .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>
#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;
}

학습내용 중 어려웠던 점

따로 어려운건 없었지만 질의응답 게시판에도 올라온 font-size를 똑같이 줘도 사이즈가 달라서 레이아웃이 다르게 잡히는것에 대한 부분입니다.

해결방법

연습중이라 font-size의 사이즈를 줄이거나, 배치하는 오브잭트의 개수를 줄이는 식으로 해결했지만 확실한 해답은 없는거 같습니다.

학습소감

건너뛴 부분과 이미지 부분이 빠져있지만 차근차근 따라하다보니 그럴듯한 네이버 메인에 대한 카피가 된거 같고 부족하지만 그래도 차츰 레이아웃과 여러 스타일적용이 익숙해져 가는거 같습니다.

profile
이상화
개발자를 꿈꾸는 이상화입니다.
이전 포스트

2021.06.07 (네이버 메인 1편)

다음 포스트

2021.06.09 (네이버 쇼핑 1편)

0개의 댓글

관련 채용 정보