2021.06.10 (네이버 쇼핑 2편)

이상화·2021년 6월 10일
0

학습한 내용

[네이버 쇼핑 메인 부분]

				<div class="list_item">
					<div class="list_half list_half_top shop_border">
						<div class="list_half_header list_half_bg">
							<div class="half_overlay"></div>
							<h3 class="shop_title_border">백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_3">
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
						</ul>
					</div>

					<div class="list_half list_half_bottom shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>
				</div>
#shop_main .list_item .list_half {
	width: 100%;
	height: 240px;
	background-color: #ffffff;
}

#shop_main .list_item .list_half.list_half_top {
	position: absolute;
	left: 0;
	top: 0;
}

#shop_main .list_item .list_half.list_half_bottom {
	position: absolute;
	left: 0;
	bottom: 0;
}

#shop_main .list_item .list_half .list_half_header {
	position: relative;

	width: 100%;
	height: 62px;
	background-color: #ffffff;
	border-bottom: solid 1px #e7e7e7;

	text-align: center;

	padding-top: 10px;
}

#shop_main .list_item .list_half .list_half_header .headline {
	display: inline-block;

	border: solid 1px #000000;
	padding: 2px 4px;
	margin-bottom: 5px;
}

#shop_main .list_item .list_half .list_half_header h3,
#shop_main .list_item .list_half .list_half_header span {
	font-size: 14px;
} 

#shop_main .list_item .list_half .list_half_header .half_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#shop_main .list_item .list_half .list_half_header.list_half_bg {
	background-color: green;
	border-bottom: solid 1px #ffffff;

	padding-top: 0;
}

#shop_main .list_item .list_half .list_half_header.list_half_bg .shop_title_border {
	position: relative;
	display: inline-block;
	padding: 2px 4px;

	border: solid 1px #ffffff;
	color: #ffffff;

	top: 50%;
	transform: translateY(-50%);
}

#shop_main .list_item .list_half .content_lists {
	overflow: hidden;
	height: 177px;
}

#shop_main .list_item .list_half .content_lists.content_lists_3 li {
	float: left;

	width: 33.33%;
	height: 100%;
	border-right: solid 1px #f0f0f0;

	text-align: center;
}

#shop_main .list_item .list_half .content_lists.content_lists_3 li:last-child {
	border-right: none;
}

#shop_main .list_item .list_half .content_lists.content_lists_3 li img {
	width: 100%;
	height: 100px;
	
	margin-bottom: 5px;
}

#shop_main .list_item .list_half .content_lists.content_lists_3 li h3 {
	font-size: 12px;

	margin-bottom: 5px;
}

#shop_main .list_item .list_half .content_lists.content_lists_3 li span {
	font-size: 11px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;

	padding-top: 11px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li {
	width: 130px;
	height: 150px;
	margin-right: 8px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li:last-child {
	margin-right: 0;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap {
	position: relative;
	
	width: 130px;
	height: 90px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .content_image_wrap .discount {
	position: absolute;
	display: block;

	width: 42px;
	height: 42px;
	background-color: orange;
	border-radius: 50%;

	font-size: 14px;
	color: #ffffff;
	line-height: 42px;
	text-align: center;

	top: 6px;
	right: 5px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li h3 {
	font-size: 12px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .price {
	color: #62a7ee;
	font-size: 11px;
}

#shop_main .list_item .list_half .content_lists.content_lists_2 li .price em {
	font-size: 13px;
	font-weight: bold;
	font-style: normal;
}

				<div class="list_item">
					<div class="list_half shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>

					<ul class="list_row_3 shop_border">
						<li>
							<div class="list_image_wrap shop_border">
								<img src="https://via.placeholder.com/90x60">
							</div>

							<div class="list_row_info">
								<span>멜론티켓</span>
								<h3>흥행 돌풍 마마, 돈크라이</h3>
							</div>
						</li>
						<li>
							<div class="list_image_wrap shop_border">
								<img src="https://via.placeholder.com/90x60">
							</div>

							<div class="list_row_info">
								<span>멜론티켓</span>
								<h3>흥행 돌풍 마마, 돈크라이</h3>
							</div>
						</li>
						<li>
							<div class="list_image_wrap shop_border">
								<img src="https://via.placeholder.com/90x60">
							</div>

							<div class="list_row_info">
								<span>멜론티켓</span>
								<h3>흥행 돌풍 마마, 돈크라이</h3>
							</div>
						</li>
					</ul>
				</div>
#shop_main .list_item .list_row_3 {
	border-top: none;

	background-color: #ffffff;
}

#shop_main .list_item .list_row_3 li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	border-bottom: solid 1px #f0f0f0;
	padding: 14px 19px 11px 19px;
}

#shop_main .list_item .list_row_3 li:last-child {
	border-bottom: none;
}

#shop_main .list_item .list_row_3 li .list_image_wrap {
	width: 90px;
	height: 60px;
	margin-right: 10px;
}

#shop_main .list_item .list_row_3 li .list_image_wrap img {
	width: 100%;
	height: 100%;
}

#shop_main .list_item .list_row_3 li .list_row_info span {
	font-size: 11px;
}

#shop_main .list_item .list_row_3 li .list_row_info h3 {
	font-size: 12px;
}

				<div class="list_item">
					<div class="list_half list_half_top shop_border">
						<div class="list_half_header list_half_bg">
							<div class="half_overlay"></div>
							<h3 class="shop_title_border">백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_3">
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
						</ul>
					</div>

					<div class="list_half list_half_bottom shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>
				</div>

				<div class="list_item">
					<div class="list_half list_half_top shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>

					<div class="list_half list_half_bottom shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>
				</div>

				<div class="list_item">
					<div class="list_half list_half_top shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>

					<div class="list_half list_half_bottom shop_border">
						<div class="list_half_header list_half_bg">
							<div class="half_overlay"></div>
							<h3 class="shop_title_border">백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_3">
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
						</ul>
					</div>
				</div>

				<div class="list_item">
					<div class="list_half list_half_top shop_border">
						<div class="list_half_header list_half_bg">
							<div class="half_overlay"></div>
							<h3 class="shop_title_border">백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_3">
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
							<li>
								<img src="https://via.placeholder.com/102x100">
								<h3>생활공작소 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>
						</ul>
					</div>

					<div class="list_half list_half_bottom shop_border">
						<div class="list_half_header">
							<span class="headline">hot deal</span>
							<h3>백화점 상품 그대로</h3>
						</div>

						<ul class="content_lists content_lists_2">
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
							<li>
								<div class="content_image_wrap shop_border">
									<img src="https://via.placeholder.com/130x90">
									<span class="discount">50%</span>
								</div>
								<h3>부드럽게 감기는 말랑말랑 파우치 이불</h3>
								<span class="price">
									<em>21,900</em> 원
								</span>
							</li>
						</ul>
					</div>
				</div>
  • 동일핫 레이아웃을 형태고 그 순서만 조금씩 다른 형태기 때문에 html태그 재사용
			<div class="brand_wrap shop_border">
				<ul class="brand_lists">
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
					<li><img src="https://via.placeholder.com/64x64"></li>
				</ul>
			</div>
#shop_main .brand_wrap {
	background-color: #ffffff;
}

#shop_main .brand_wrap .brand_lists {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 18px;
}

#shop_main .brand_wrap .brand_lists li {
	width: 64px;
	height: 64px;
}

#shop_main .brand_wrap .brand_lists li img {
	width: 100%;
	height: 100%;
}

[네이버 쇼핑 푸터 부분]

	<footer id="shop_footer">
		<div class="shop_container">
			<div class="policy_wrap">
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
				<span>네이버 이용약관</span>
			</div>
			<p>네이버㈜는 통신판매중개자이며, 통신판매의 당사자가 아닙니다. 상품, 상품정보, 거래에 관한 의무와 책임은 판매자에게 있습니다.</p>
		</div>
	</footer>
</body>
</html>
#shop_footer {
	padding-bottom: 180px;

	text-align: center;
}

#shop_footer .policy_wrap {
	border-top: solid 2px #5d5d5d;
	padding-top: 27px;
	margin-bottom: 11px;
}

#shop_footer .policy_wrap span {
	/*background-color: #d7d7d7;*/

	font-size: 11px;
}

#shop_footer .policy_wrap span:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 8px;
	background-color: #d7d7d7;
	vertical-align: -1;
}

#shop_footer .policy_wrap span:first-child:before {
	content: initial;
}

#shop_footer p {
	font-size: 11px;
	color: #888;
	margin-bottom: 11px;
}

학습내용 중 어려웠던 점

하나의 레이아웃 틀을 만들어두고 그것을 그대로 쓰거나 부분만 변경, 또는 위치를 이동하는 등으로 작업을 해서 크게 어렵지 않았지만 content_lists_3 부분에 오른쪽 content의 오른쪽 부분이 100% 채워지지 않는 문제가 있었습니다.

해결방법

개발자 도구에 width값도 같고 border값도 같은데 채워지지 않아서 여러방법을 시도해보다 width 33.33%를 좀더 소수점을 늘리는 식으로 수치를 변경하니 틀에 맞아서 그걸로 문제를 해결했습니다.

학습소감

비슷하게 구성해야되는 레이아웃이 많을경우 공통으로 적용되는 css등을 잘만들어두면 코드의 재사용도 줄이고 빠르게 레이아웃을 구성할수 있다는걸 보다 크게 체감할수 있는 강의였습니다.

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

2021.06.09 (네이버 쇼핑 1편)

다음 포스트

2021.06.11 (네이버 웹툰 1,2)

0개의 댓글

관련 채용 정보