210721 개발일지

1) 학습한 내용

국내외 사이트 카피캣 (네이버 쇼핑 1편)

> 쇼핑센터 상단

<header id="shop-header">
<div id="shop-header-top"></div>
<div id="shop-header-middle"></div>
<nav>
<div class="shop-container">
	<ul>
	<li><a href="#">홈</a></li>
	<li><a href="#">백화점</a></li>
	<li><a href="#">아울렛</a></li>
	<li><a href="#">스타일</a></li>
	</ul>
</div>
</nav>
</header>

#shop-body 
	{background-color: #e9ecef}

.shop-container 
	{width: 1300px;
	margin: 0 auto;}

.shop-border 
	{border: solid 1px #ced2d7;}

.w-100 
	{width: 100%;}

.h-100 
	{height: 100%;}

#shop-header #shop-header-top 
	{width: 100%;
	height: 36px;
	background-color: #03c75a;
	border-bottom: solid 1px #e8e8e8;}

#shop-header #shop-header-middle 
	{width: 100%;
	height: 66px;
	background-color: #03c75a;}

#shop-header nav 
	{width: 100%;
	background-color: #ffffff;
	border-top: solid 1px #e8e8e8;
	border-bottom: solid 1px #e8e8e8;}

#shop-header nav ul 
	{display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 13px 0 8px 0;}

#shop-header nav ul li {margin-right: 16px;}

> 메인(1)

<main role="main" id="shop-main">
<div class="shop-container">

<div class="list-wrap">
<div class="list-item">
<div class="category-wrap w-100 h-100 shop-border">
						
<div class="category-left">
	<h3>카테고리</h3>
	<ul>
		<li><a href="#">패션의류</a></li>
		<li><a href="#">패션잡화</a></li>
		<li><a href="#">화장품</a></li>
		<li><a href="#">디지털/가전</a></li>
		</ul>
</div>
						
<div class="category-right">
<div class="category-right-top">
<div class="category-info">
	<span class="headline">인기상품</span>
		<h3>
			견고함의 차이<br>
			세라믹 식탁 세트
		</h3>
	<span class="price">308,800원</span>
</div>

<div class="image-wrap">
		<img src="https://via.placeholder.com/140x160">
</div>
</div>
<div class="category-right-bottom">
								
	<span class="headline">추천태그</span>

<div class="tag-wrap">
	<span class="tag">#유아마스크</span>
	<span class="tag">#하객원피스</span>
	<span class="tag">#멀티밤</span>
	<span class="tag">#서큘레이터</span>
	<span class="tag">#유아마스크</span>
	<span class="tag">#하객원피스</span>
	<span class="tag">#멀티밤</span>
	<span class="tag">#서큘레이터</span>
</div>

</div>
</div>

</div>
</div>

#shop-main .list-wrap 
	{display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;}

#shop-main .list-item 
	{position: relative;
	width: 308px;
	height: 496px;
	/*background-color: #ffffff;*/

	margin-bottom: 20px;}

#shop-main .list-item.banner img 
	{width: 100%;
	height: 100%;}

#shop-main .list-item .category-wrap 
	{overflow: hidden;}

#shop-main .list-item .category-wrap .category-left 
	{float: left;
	width: 124px;
	height: 100%;
	background-color: #333949;}

#shop-main .list-item .category-wrap .category-left h3
	{padding: 14px 0 14px 13px;
	border-bottom: 1px solid #2b313f;

	font-size: 13px;
	color: rgba(255, 255, 255, 0.46);}

#shop-main .list-item .category-wrap .category-left ul {}

#shop-main .list-item .category-wrap .category-left li {}

#shop-main .list-item .category-wrap .category-left a 
	{display: block;

	padding: 7px 8px;


	font-size: 13px;
	color: rgba(255, 255, 255, 0.46);
	font-weight: 700;}

#shop-main .list-item .category-wrap .category-right 
	{float: right;
	width: 182px;
	height: 100%;
	background-color: #ffffff;}


#shop-main .list-item .category-wrap .category-right-top {
	width: 100%;
	height: 306px;
	border-bottom: solid 1px #e7e7e7;

	text-align: center;}

#shop-main .list-item .category-wrap .category-right-top .category-info 
	{padding: 20px 0;
	/*text-align: center;*/}

#shop-main .list-item .category-wrap .category-right-top .headline,
#shop-main .list-item .category-wrap .category-right-bottom .headline 
	{display: inline-block;

	font-size: 12px;
	border: solid 1px #00ab33;
	color: #00ab33;

	margin-bottom: 7px;}


#shop-main .list-item .category-wrap .category-right-top .category-info h3 
	{font-size: 18px;}

#shop-main .list-item .category-wrap .category-right-top .category-info .price 
	{font-size: 16px;
	color: skyblue;}

#shop-main .list-item .category-wrap .category-right-top .image-wrap 
	{/*text-align: center;*/}

#shop-main .list-item .category-wrap .category-right-bottom 	{padding-top: 20px;

	text-align: center;}

#shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag 
	{display: inline-block;
	width: auto;
	max-width: 75px;
	height: 24px;
	background-color: #e8eef4;

	margin: 6px 1px 0 1px;
	padding: 0 5px;
    
    line-height: 26px;
	font-size: 12px;
	color: #666;
	vertical-align: top;}

> 배너

<div class="list-item banner">
<div class="w-100 h-100 shop-border">
	<img src="http://via.placeholder/150">
</div>
</div>

> 풀샷

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

처음에 영상보고 제대로 따라했는데도 견고함~ 부터 화면이 안떴었다

3)해결방법 작성

화면비율을 줄이니 다행이 잘 떠서 강사님께 안물어보고 해결해서 다행이였다.

4)학습 소감

중간에 결과값이 안나와서 애를 좀 먹었는데 해결한후 잘 풀어나갔다
가슴이 철렁했지만 해결해서 다행이다