Day 18 - 네이버 쇼핑 카피캣 1

SUN·2021년 7월 21일

1. 학습 내용

HTML

<body id="shop-body">

<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>
- 헤더 부분 만들기

<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="img-wrap">
								<img src="https://via.placeholder.com/140px*160px">
							</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>
			<div class="list-item banner">
				<div class="w-100 h-100 shop-border">
					<img src="https://via.placeholder.com/140px*160px">
                    - 사진밖에 없음
				</div>
			</div>

CSS

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

.shop-container {
	width: 1300px;
	margin: 0 auto;}
    - 넓이를 지정해주어 좌우 여백을 만든다.

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

.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;
	border-bottom: solid 1px #e8e8e8;}

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

#shop-header ul {
	display: flex;
	flex-wrap: rap;
	align-items: center;

	padding: 13px 0 8px 0;}
    - x축 정렬과 패딩 값을 부여

#shop-header ul li {
	margin-right: 16px;}
    - 마진을 주어 각 항목의 간격을 벌림

#shop-main .list-wrap {
	display: flex;;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;}
    - 각 박스를 정렬

#shop-main .list-item {

position: relative;
width: 308px;
height: 496px;
background-color: yellow;

	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 {	
	font-size: 13px;
	color: rgba(255, 255, 255, 0.46);

	padding: 14px 0 14px 13px;
	border-bottom: solid 1px #2b313f;}


#shop-main .list-item .category-wrap .category-left a {
font-size: 13px;
color: rgba(255, 255, 255, 0.46);
font-weight: 700;

padding: 7px 8px;

display: block; 
/*여백을 클릭해도 클릭이 될 수 있도록 설정*/}

#shop-main .list-item .category-wrap .category-right {
	float: right;

	width: 182px;
	height: 100%;
	background-color: #ffffff; }

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

#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-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: 85px; /*최대 넓이 설정*/
	height: 24px;
	background-color: #e8eef4;

	margin: 6px 1px 0 1px;
	padding: 0 5px;

line-height: 26px; /줄간격 설정/
font-size: 12px;
color: #666;
vertical-align: top;}