① 새 파일 shop.html
파일을 만든다. (index.html
이 있는 파일에 저장)
② index.html
파일의 디폴트 설정값을 복사해서 shop.html
에 붙여넣기 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>
③ index.html
파일에서 <header>태그
안의 <li>태그
중 쇼핑 <a>태그
에서 href="shop.html"로 경로 설정을 해준다.
④ css파일은 style.css
를 그대로 사용한다.
<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>CATEGOTY</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>
css↓
/* 쇼핑페이지 */
/* 쇼핑페이지 Default */
#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 #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%;
background-color: #ffffff;
border-top: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
}
#shop_header nav ul {
display: flex;
flex-wrap: wrap;
/*justify-content: flex-start;*/ /* 디폴트값 */
align-items: center;
padding: 13px 0 8px 0;
}
#shop_header nav ul li {
margin-right: 16px;
}
/* shop_main */
#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 { /* class명을 적을때 띄어쓰기를 하지 않는다면, class명 두 개를 다 가지고 있는 태그가 선택된다.(and 조건이라고 생각하면 됨) */
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: 13px 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; /* li태그영역에 마우스를 올리면 바로 a태그가 적용되도록 (클릭할 수 있는 상태) */
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: calc(100% - 124px);
/* ★★category_wrap의 넓이값 308px에서 category_left의 넓이값 124px을 빼는 것이 아니라, category_wrap(shop_border와 같은 태그)에서 적용된 border값 좌우 1px씩을 뺀 306px-124px = 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;
/* 자식인 category_info의 글자들과 image_wrap안의 img둘 다 중앙정렬된다. */
/* 굳이 img를 따로 <div>태그를 사용할 필요가 없었음 */
}
#shop_main .list_item .category_wrap .category_right_top .category_info {
padding: 20px 0;
/*text-align: center;*/ /* 부모인 .right_top에 작성하면 image_wrap과 함께 적용된다. */
}
#shop_main .list_item .category_wrap .headline { /* right_top과 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;*/ /* 부모인 .right_top에 작성하면 category_info와 함께 적용된다. */
}
#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; /* float처럼 공간의 넓이값에 맞추어서 줄바꿈 현상이 일어난다. */
width: auto;
max-width: 80px;
height: 24px;
background-color: #e8eef4;
margin: 6px 1px 0 1px;
padding: 0 5px;
line-height: 26px;
font-size: 12px;
color: #666;
vertical-align: top;
}
강의 도중에 category_wrap부분의 왼쪽 검은색 영역과, 오른쪽 흰색 영역을 설정하는 것이 오류가 났다.
처음 강의에서는
category_wrap의 width: 308px;, border: 1px solid;를 설정했었고,
왼쪽 영역의 width값을 124px
오른쪽 영역의 width값을 308px - 124px = 184px로 값을 입력했다.
그런데 오른쪽 흰색영역이 category_wrap의 넓이값을 초과한 값이라며 다른곳으로 영역이 생성되었기 때문에, 강의 도중에 좌우 border값 1px + 1px = 2px을 뺀 182px을 입력하는 것으로 변경되었다.
나는 지난시간에 배운 calc
를 사용하여
width: calc(100% - 2px - 124px)
을 입력했는데, 나중에 검사로 확인을 해보니, 오른쪽 영역이 180px로 지정되어 있었다.
이상하게 생각이 되어서, border값을 빼지 않은 식을 입력했는데 182px로 계산되어 적용 된 것을 확인하였다.
width: calc(100% - 124px) = 182px
★ calc에서 100%라고 입력하여 사용하면 자동으로 border값을 뺀 나머지 영역으로 계산을 해 준다는 것을 알게 되었다★
어제부터는 작은 부분들을 살짝 변경해서 적용해 보고 있는데, 숨겨진 기능들을 발견하는 일이 생기고 있어서 기쁘다.
이제는 조금씩 나만의 작업스타일을 구축해가는 챕터로 들어선 것 같다.