2021.07.22네이버쇼핑2

dogyeomyeo4444·2021년 7월 22일

오늘의 강의 내용

* 네이버 쇼핑 나머지부분 작업

네이버 쇼핑 완성된 부분

<!-- shop.html -->
<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="img/apple.jpg">
								<h3>생활공작서 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>

							<li>
								<img src="img/apple.jpg">
								<h3>생활공작서 과탄산소다</h3>
								<span>1.5kg x 4입</span>
							</li>

							<li>
								<img src="img/apple.jpg">
								<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 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>




				<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>



			</div>


			<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>

		</div>
	</main>


	<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>

<!-- style.css언어 -->
#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 {
	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;
	border: solid 1px #ffffff;
	padding: 2px 4px;

	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_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_3 li:last-child {
	border-right: none;
}

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

#shop_main .list_item .list_half .content_lists_3 li h3 {
	font-size: 13px;
	margin-bottom: 5px;
}

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

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

	padding-top: 11px;
}

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

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

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

#shop_main .list_item .list_half .content_lists_2 li .content_image_wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
}

#shop_main .list_item .list_half .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_2 li h3 {
	font-size: 13px;
}

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

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

#shop_main .list_item .list_row_3{
	background-color: #ffffff;
	border-top: none;
}

#shop_main .list_item .list_row_3 li {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	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: 12px;

}

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

#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%;
}


#shop_footer {
	padding-bottom: 27px;
	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: 12px;
}

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

#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 p {
	font-size: 12px;
	color: #888;
	margin-bottom: 11px;
}

부모영역이 공간에 대한 구체적인 크기를 가지고 있어야지만 자식의 %크기가 정상적으로 동작한다.
font-weight 로 bold와 bolder값을 적용할수도 있다.
em태그는 태생적으로 font에 기울기가 적용된다.
sublime text 에서도 ctrl+f 로 써칭이 가능하다. 찾고싶은 영역을 빠르게 찾기 가능
상하, 좌우에 border값이 있을때 한부분만 border값을 none값을 넣을수도 있다. 반대로 이와 같은 방법으로 border값을 넣을수도 있다.
ex)

#shop_main .list_item .list_row_3{
	border-top: none; //top부분만 지정하여 테두리를 삭제
}

p태그가 많다면 p태그안에 class를 지정하여 class를 기준으로 p태그를 선택해주면 된다.
이미지를 무료로 다운로드 받을수 있는 사이트

웹사이트 로고 포토폴리오용 작업시 활용

강의를 마친후 소감

혼이 빠진다는 느낌인거 같다. 소스코드가 장문이 되고, 복사 붙여넣는 작업이 많아지면서 가독성이 현저히 떨어져, 다음번에는 강사님과 달라도 가독성을 좋게 만들어봐야겠다.

힘든점, 어려운점

아직은 장문의 소스코드가 익숙하지 않아 고칠려는 부분을 찾고 수정하는데 맞는지 여러번 확인하는 번거로움이 있었다. 말그대로 찾기가 힘들었다.

해결방안

sublime text도 ctrl+f 단축기를 쓸수있어 원하는 부분을 빨리 찾을수 있다. 좀더 빨리 알았으면 좋았을껄 이라는 생각을 하였다.

dogyeomyeo4444

i will be the best

이전 포스트

2021.07.21 네이버쇼핑1

다음 포스트