2021.07.21 NAVER-3

정혜리·2021년 7월 21일
CSSNaverhtml개발일지코린이프론트엔드
0

Practice-copy_websites

목록 보기
7/15

Day18,
Naver-'쇼핑'페이지를 따라 만들어 봤다!

오늘 무엇을 배웠지?

Naver-'쇼핑' : https://shopping.naver.com/

html

  1. new file-save(shop0721.html), save(style0721.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
    기본 설정 + html, css 파일을 연동
<link>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>
	<link rel="stylesheet" type="text/css" href="css/style0721.css">
</head>
<body id="shop-body">

</body>
</html>
  1. <header>태그로 상단 영역을 설정하고 id를 입력한다. <div> 태그로 위,아래 영역으로 크게 구분하고 id를 설정한다. 아래 영역에 쇼핑 카테고리 리스트 를 <div>로 구분짓고, 각 카테고리는<ul>,<li>,<a>태그로 설정한다.
    <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>
					<li><a href="#">디자인윈도</a></li>
				</ul>
			</div>
		</nav>
	</header>

CSS-Style

  1. Default CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
ol, ul { list-style: none; }
a {	text-decoration: none; 	color: #000000; }
img { vertical-align: middle; }
.clearfix { clear: both; }
input, button { border: none; }
input, textarea { outline: none; }

/*너비는 항상 1330px, 중앙정렬되도록 설정*/
.container { width: 1330px; margin: 0 auto; } 
/*쇼핑페이지 상단*/
.shop-container { width: 1300px; margin: 0 auto; }
.shop-border { border: solid 1px #ced2d7; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
#shop-body { background-color: #e9ece8; }
  1. 쇼핑페이지의 위,아래 영역을 디자인한다. (너비, 높이, 배경색, 테두리) 
#shop-header #shop-header-top { width: 100%; height: 36px;
	background-color: #03c75a; border: solid 1px #e8e8e8;  }
#shop-header #shop-header-middle { width: 100%; height: 66px;
	background-color: #03c75a; }
  1. 쇼핑 페이지의 카테고리 리스트를 디자인한다. 리스트 영역인 <nav>영역의 너비, 테두리, 배경색 등을 설정한다. 그 안의 <ul>태그에 속한 태그들의 배열을 'flex'기능으로 설정한다.
#shop-header nav { width: 100%; border-top: solid 1px #e8e8e8;
	border-bottom: solid 1px #e8e8e8; background-color: #ffffff; }
#shop-header nav ul { padding: 13px 0 8px 0; display: flex; flex-wrap: wrap;
	justify-content: flex-start; align-items: center; }
#shop-header nav ul li { margin-right: 16px; }

<main>-1

html

(header html에 이어서)
1. <main> 태그로 main영역을 설정하고, role, class를 설정한다. 왼쪽에 쇼핑카테고리를 .category-left로 설정하고,<ul>,<li>,<a>태그로 그에 속한 목록을 설정한다.

<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>
  1. 카티고리 옆 공간의 쇼핑항목 리스트를 <div>태그로 .category-right class를 설정한다. 그중 위,아래로 나누어 위 영역인 항목에 대한 설명을 <div>.category-info로 설정하고 <span>,<h3>,<img>태그로 입력한다. 아래 영역인 간단한 설명을 <span>태그로 설정한다.
					<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>
								<img src="https://via.placeholder.com/160x180">
							</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>
  1. 쇼핑 항목 리스트 들 중 중간에 있는 배너광고를 <div>태그로 설정하고 이 배너 광고의 자식태그의 class에 shop-border, w-100, h-100 설정해 배너광고 디자인을 설정한다.
				<div class="list-item banner">
					<div class="shop-border w-100 h-100">
						<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>

CSS-Style

(main_right css에 이어서)
1. <main>에 overflow:hidden;을 적용해 자식태그들의 영향을 받도록 설정하고 padding값을 적용해 간격을 설정한다.

main { overflow: hidden; padding: 20px 0 0 0; }
  1. .list-wrap, .list-item 영역에 대한 디자인을 한다. 'flex' 기능으로 쇼핑 리스트들의 배열을 설정한다. .list-item의 너비, 높이, 배경색등을 설정하고 margins값으로 간격을 설정한다.
#shop-main .list-wrap { display: flex; flex-wrap: wrap;
	 justify-content: space-between; align-items: stretch; }
#shop-main .list-item { width: 308px; height: 496px; 
	background-color: yellow; margin-bottom: 20px; }
  1. .category-wrap 영역을 overflow: hidden;으로 설정해 자식 태그의 영향을 받도록 설정한다. .category-left는 브라우저에 왼쪽에 위치하도록 설정하고 너비, 높이, 배경색 등을 설정한다. .category-left의 <h3>, <a>태그의 글자 색, 글자 크기 등을 설정한다. <a>태그에는 display: block;을 설정해 이 태그가 속한 영역에 모두 기능이 적용 되도록 한다.
#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); font-weight: 700; 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; display: block;
	padding: 7px 8px; }
  1. .category-right에 float:right;로 차례로 좌->우 배치 되도록 설정한다. 너비, 높이, 배경색 등을 설정한다. .category-right-top의 너비, 높이, 테두리등을 디자인하고 중앙정렬한다. 또, 이 태그에 속한 태그들의 글자 사이즈 ,테두리,글자 색 등을 디자인한다.
#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; }
#shop-main .list-item .category-wrap .category-right-top .headline,
#shop-main .list-item .category-wrap .category-right-bottom .headline { 
	font-size: 12px; border: solid 1px #00ab33; color: #00ab33; display: inline-block;
	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; }
  1. .category-right-bottom 영역을 디자인한다. 이 태그에 속한 태그들을 중앙정렬로 설정하고, padding값으로 간격을 설정한다. 또, .tag-wrap의 .tag를 디자인한다. 너비, 높이, 배경색, 글자색, 글자크기 등을 설정하고 padding,margin값으로 간격을 설정한다.
#shop-main .list-item .category-wrap .category-right-bottom { text-align: center;
	padding-top: 20px; }
#shop-main .list-item .category-wrap .category-right-bottom .tag-wrap .tag { 
	display: inline-block; width: auto; height: 24px;
	background-color: #e8eef4; padding: 0 5px; margin: 6px 1px 0 1px;
	line-height: 26px; font-size: 12px; color: #666; vertical-align: top; }
  1. .list-item.banner 의 <img>의 너비, 높이를 설정한다.
#shop-main .list-item.banner img { width: 100%; height: 100%; }

무엇이 어려웠지?

오늘은 오탈자 실수는 없었다. 하지만, 똑같이 적었다고 생각했는데 결과가 또! 똑같이 안나왔다.

어떻게 해결했지?

열심히 이유를 찾아보니깐, 열린태그로는 열심히 html에서 레이아웃을 설계했는데, 닫힌태그를 제대로 안닫았었다. 자동적으로 열린태그를 입력하면 닫힌태그가 자동완성 되는데, 어떻게 된건지 닫힌태그가 이상하게 없었다. 열심히 수정하다가 지웠나보다...

그래서?

어제의 실수를 최대한 반복하지 않겠다고 생각하고 열심히 오탈자를 신경쓰면서 했다. 그랬더니 다른 곳에서 실수가 있었다. 정말 쉽지 않다ㅠㅜ

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0721

profile
정혜리
.
이전 포스트

2021.07.20 NAVER-2

다음 포스트

2021.07.22 NAVER-4

0개의 댓글