개발일지 12일차

이재경·2021년 6월 9일

학습 내용

네이버 쇼핑 header / main

shop.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<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="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>


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

	</main>


</body>
</html>

style.css

/* 쇼핑 페이지 */
#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;
}
#shop-main .list-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#shop-main .list-item {
	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 ul {
}
#shop-main .list-item .category-wrap .category-left ul li {
}
/*block 요소로 전환하여 상하 padding 값이 적용이 가능하다. */
#shop-main .list-item .category-wrap .category-left ul li 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;
	text-align: center;
}
#shop-main .list-item .category-wrap .category-right-top {
	width: 100%;
	height: 306px;
	border-bottom: solid 1px #e7e7e7;
} 
#shop-main .list-item .category-wrap .category-right-top .category-info {
	padding: 20px 0;
	/*text-align: center;*/
}
/*span 태그는 inline 요소이기 때문에 margin을 사용할 수 없다
 따라서 display를 inline-block 요소로 변경해준다.*/
#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;
}
/* inline-block 요소에서 float속성처럼 안에있는 content들의 합이
 content를 묶은 width값보다 클 경우 자동으로 줄맞춤 현상이 일어난다.*/
#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: 11px;
	color: #666;
	vertical-align: top;
}

결과

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

chrome 브라우저에서 갑작스럽게 #shop-main .list-item .category-wrap .category-right 부분이 출력되지 않아서 이 부분이 왜 그런 오류가 발생했는지 이해하지 못했다. 다른 브라우저에서는 정상적으로 화면에 표시되었다. font-size, width값을 줄여보았는데 해결하지 못하였고, 시간이 흐르니 크롬에서도 정상적으로 화면 출력이 이뤄졌다.

해결법 작성

시간이 해결해준다 끝.

학습 소감

코드의 오류가 아닌 브라우저의 설정인지 아님 다른 것의 오류인지는 모르겠지만 가끔 이런 오류가 발생하여, 있지도 않는 오류를 찾는 덧없는 시간이 발생하여 현타오는 것 같다.

이재경

I'm Closer

이전 포스트

개발일지 11일차

다음 포스트