1 폴더 생성
1) root폴더(프로젝트명)를 생성하고, frontend폴더를 생성한다.
2) frontend폴더 아래 src폴더를 생성한다.
3) src폴더 아래 index.html 파일을 생성한다.
- 사이트명을 임시로(h1태그) 넣어준다.
4) frontend폴더로 이동한다.
5) ` root\frontend> npm init ` 실행한다.
2 테스트 서버 설치
1) npm 개발자 모드(명령어 -D추가)로 라이브서버 npm모듈을 설치한다.
- root\frontend> npm install --save -D live-server
2) frontend폴더 아래에 생성된 package.json파일을 수정한다.
3) 테스트서버를 실행한다.
- root\frontend> npm start
3 기본 디자인
1) index.html 기본뼈대를 생성한다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>JSAMAZONA</title> </head> <body> <div class="grid-container"> <header> <div class="brand"> <a href="/#/">jsamazona</a> </div> <div> <a href="/#/signin">Sign-In</a> <a href="/#/cart">Cart</a> </div> </header> <main id="main-container"> Products List </main> <footer> All rights reserved @2021 </footer> </div> </body> </html> |
[ root\frontend\src\index.html ]
2) style.css파일을 생성한다.
/* Basic CSS */ *{ box-sizing: border-box; } html{ font-size: 62.5%; /* 16px * 62.5 = 10px = 1rem */ } body{ height: 100vh; font: 1.6rem Helvetica, Arial; margin: 0; } a{ color: #000000; text-decoration: none; } a:hover{ color: #f08040; } button{
cursor: pointer;
}
input,
button{ font: 1.6 helvetica;
padding: 1rem;
border: 0.1rem #808080 solid;
border-radius: 0.5rem;
}
input:hover,
button:hover{ border: 0.1rem #404040 solid;
}
button.primary{
background-color:#f0c040;
}
.fw{
width:100%;
}
.success{
color:#40c040;
}
.error{
color:#c04040;
}
/* Body CSS */ display:grid; grid-template-areas: 'header' 'main' 'footer'; grid-template-columns: 1fr; grid-template-rows: 5rem 1fr 5rem; height:100%; } header{ grid-area:header; background-color:#203040; color:#ffffff; display:flex; justify-content:space-between; align-items:center; padding:.5rem; } header a{ color:#ffffff; font-weight:bold; text-decoration:none; } .brand a:hover{ color:#f08040; } .brand a { font-size: 3rem; } /* Footer CSS */ footer{ background-color:#203040; display:flex; justify-content: center; align-items: center; color:#ffffff; } |
[ root\frontend\src\style.css ]
3) index.html에서 main태그를 수정한다.
<main> <div> <ul class="products"> <li>
<div class="product">
<a href="/#/product/1">
<img src="/images/tree_modeling.jpg" alt="tree_modeling">
</a>
<div class="product-name">
<a href="/#/product/1">
Tree 3D Modeling
</a>
</div>
<div class="product-format">
FBX
</div>
<div class="product-price">
$ 0.8
</div>
</div>
</li>
</ul>
</div> </main> |
[ root\frontend\src\index.html ]
4) images폴더를 생성하고, 제품 이미지를 넣어준다.
- root\frontend\src\images
5) style.css에서 제품부분 디자인을 추가한다.
| .brand a { font-size: 3rem; } /* 중략... */ /* products */
.products{
display:flex;
flex-wrap:wrap;
list-style-type:none;
padding:0;
margin:0;
justify-content:center;
}
.products li{
flex: 0 1 30rem;
margin: 1rem;
margin-bottom: 0;
height: 42rem;
border-top:0.2rem #e0e0e0 solid;
}
.product{
display:flex;
flex-direction:column;
justify-content: space-around;
align-items:center;
height:70%;
}
.product img{
max-height: 22rem;
max-width: 22rem;
margin-top: 2rem;
}
.product-name{
line-height:2.2rem;
}
.product-format{
font-size: 1.2rem;
color:#808080;
}
.product-price{
font-size: 2rem;
}
.product-price span{
font-size:1.2rem;
}
/* footer */
footer{
background-color:#203040;
display:flex;
justify-content:center;
align-items:center;
color:#ffffff;
}
|
[ root\frontend\src\style.css ]
'웹개발 자료실 > No프레임워크 쇼핑몰제작Code' 카테고리의 다른 글
| E-commerce Vanila JS [6편] Cart 제작 (0) | 2021.12.08 |
|---|---|
| E-commerce Vanila JS [5편] 랭킹, 상세페이지 제작 (1) | 2021.12.06 |
| E-commerce Vanila JS [4편] 웹팩 & 바벨 & ESLint 적용 (0) | 2021.12.04 |
| E-commerce Vanila JS [3편] 벡앤드 설정 (0) | 2021.12.03 |
| E-commerce Vanila JS [2편] 라우팅 기초 (0) | 2021.12.02 |
댓글