7월 21일 (네이버 쇼핑 카피캣)

학습내용

네이버 메인과 css를 같이 공유해서 진행했다.
🔵shop_header

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

css에 먼저 클래스를 지정해주고 html을 작업해주었다.
.shop_container에 width값을 주고 margin: 0 auto;로 중앙정렬 되게 설정해줌

#shop_header nav ul {
	padding: 13px 0 8px 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;

}

ul에 flex로 y축정렬되게 해준다.

🔵main
main에서는 list_wrap을 만들고 그 안에 똑같은 list_item들을 8개 만들어 준후 왼쪽 상단 첫번재, 두번째까지만 실습했다.

<div class="category_wrap w-100 h-100 shop_border">
	<div class="category_left">
		<h3>category</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="img_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>

list_item에 padding-top을 지정한적은 없지만 css파일을 공유하고 있기 때문에 네이버 메인에서 적용했던 padding-top값이 네이버 쇼핑에도 적용이 됐다.

첫번째 list_item을 category_wrap 으로 div를 하나 만들어서 그 안에 작업을 했다.
css에서 미리 만들어준 클래스를 적용했다.

왼쪽과 오른쪽 ,오른쪽 상단, 오른쪽 하단 이렇게 세부적으로 작업을 했다.

#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_right {
	float: right;

	width: 182px;
	height: 100%;

	background-color: #ffffff;
} 

오늘은 float를 사용해 배치작업을 해주었다. 부모 태그에는 overflow:hidden;을 적용해줬다.

• 안에 있는 값들이 감싸고 있는 틀의 width보다 크다면 자동으로 줄바꿈 현상이 나타난다.(y축정렬의효과)

<div class="list_item banner">
	<div class="w-100 h-100 shop_border">
			<img src="https://via.placeholder.com/150">
	</div>
</div>

두번째 list_item은 이미지만 삽입해 주었다.
class에 w-100, h-100을 넣어서 이미지가 list_item에 꽉 차게 만들었다.

어려웠던 점

오늘은 지금까지 잘 이해하고 있었던 flex를 어디에 적용해야하는가에 약간 또 헷갈렸다.
ul, li 중 어디에 flex를 적용해야 하나 싶었다.

해결방법

ul안에 li가 있으니 li를 y축 정렬시키고 싶으면 부모 태그인 ul에 flex를 적용시켜주면 되는 것이였다. 이런 기본적인 것도 헷갈리다니 ㅠㅠ갈 길이 멀었다.

학습소감

이제 a를 inline-block으로 변경했을 때 나타나는 변화와 적용시킬 수 있는 속성들에 대해 확실하게 알게되었다. 크기를 지정해주고 싶을 때, 모든 공간을 다 클릭할 수 있게 할 때 !
이젠 flexbox.help를 즐겨찾기로 지정해놓아야 할 것같다.
https://via.placeholder.com/은 아예 외워버려서 그냥 바로 삽입을 해버린다.
아무것도 모르는 바보인줄 알았는데 그래도 무의식적으로 기억하고 있어서 신기하다 👍