아마존 E-commerce 클론 -1) html 파일만들고 css 설정하기

NODE.JS 2021. 5. 26. 16:42

맨처음 template 폴더를 만들어주고 폴더안에 index.html파일 생성후 !쳐서 기본내용을 입력해준다.

index.html을 다음과 같이 만들고 style.css파일을 만들고 설정하자.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <title>Amazona</title>
  </head>
  <body>
    <div class="grid-container">
      <header class="row">
        <div>
          <a class="brand" href="index.html">amazona</a>
        </div>
        <div>
          <a href="cart.html">Cart</a>
          <a href="signin.html">Sign In</a>
        </div>
      </header>
      <main>
          <ul>
              <li>Product1</li>
              <li>Product2</li>
              <li>Product3</li>
              <li>Product4</li>

          </ul>
      </main>
      <footer class="row center">All right reserved</footer>
    </div>
  </body>
</html>

html {
    font-size: 62.5%; /* 16px x 62.5 = 10px = 1rem */
    box-sizing: border-box;
  }
  body {
    margin: 0;
    height: 100vh;
    font-size: 1.6rem;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  /* Layout */
  .grid-container {
    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;
  }
  main {
    grid-area: main;
    padding: 1rem;
  }
  footer {
    grid-area: footer;
    background-color: #203040;
    color: #ffffff;
  }
  /* Common */
  h1 {
    font-size: 1.8rem;
    padding: 1rem 0;
  }
  h2 {
    font-size: 1.6rem;
    padding: 1rem 0;
  }
  
  a {
    text-decoration: none;
  }
  a:hover {
    color: #ff8000;
  }
  /* Header */
  header a {
    color: #ffffff;
    padding: 1rem;
  }
  a.brand {
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .row.center {
    justify-content: center;
  }

이제 프로덕트 이미지를 등록하고 나타내주자.

images폴더를 만들고 상품 사진을 넣어준다.

사진을 넣어주고 여러가지 스타일 설정도 해준다.

별모양을 넣기 위해서 아이콘도 link로 넣어준다.


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <title>Amazona</title>
  </head>
  <body>
    <div class="grid-container">
      <header class="row">
        <div>
          <a class="brand" href="index.html">amazona</a>
        </div>
        <div>
          <a href="cart.html">Cart</a>
          <a href="signin.html">Sign In</a>
        </div>
      </header>
      <main>
          <div class="row center">
              <div class="card">
                  <a href="product.html">
                      <!-- image size: 680px by 830px -->
                      <img class="medium" src="./images/product-1.jpeg" alt="product">
                  </a>
                  <div class="card-body">
                      <a href="product.html">
                          <h2>Nike Slim Shirts</h2>
                      </a>
                      <div class="rating">
                          <span>
                              <i class="fa fa-star"></i>
                          </span>
                          <span>
                              <i class="fa fa-star"></i>
                          </span>
                          <span>
                              <i class="fa fa-star"></i>
                          </span>
                          <span>
                              <i class="fa fa-star"></i>
                          </span>
                          <span>
                              <i class="fa fa-star"></i>
                          </span>
                      </div>
                      <div class="price">
                          $120
                      </div>
                  </div>
              </div>
          </div>
      </main>
      <footer class="row center">All right reserved</footer>
    </div>
  </body>
</html>

html {
    font-size: 62.5%; /* 16px x 62.5 = 10px = 1rem */
    box-sizing: border-box;
  }
  body {
    margin: 0;
    height: 100vh;
    font-size: 1.6rem;
    font-family: Helvetica, Arial, sans-serif;
  }
  
  /* Layout */
  .grid-container {
    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;
  }
  main {
    grid-area: main;
    padding: 1rem;
  }
  footer {
    grid-area: footer;
    background-color: #203040;
    color: #ffffff;
  }
  /* Common */
  h1 {
    font-size: 1.8rem;
    padding: 1rem 0;
  }
  h2 {
    font-size: 1.6rem;
    padding: 1rem 0;
  }
  
  a {
    text-decoration: none;
  }
  a:hover {
    color: #ff8000;
  }
  /* Header */
  header a {
    color: #ffffff;
    padding: 1rem;
  }
  a.brand {
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .row.center {
    justify-content: center;
  }
  /* Image */
  img {
    border-radius: 0.5rem;
  }
  img.medium {
    max-width: 29rem;
    width: 100%;
  }
  
  /* Card */
  .card {
    border: 0.1rem #c0c0c0 solid;
    background-color: #f8f8f8;
    border-radius: 0.5rem;
    margin: 1rem;
  }
  .card-body {
    padding: 1rem;
  }
  .card-body > * {
    margin-bottom: 0.5rem;
  }
  .price {
    font-size: 2rem;
  }
  /* Rating */
  .rating span {
    color: #f0c040;
    margin: 0.1rem;
  }

아이템을 추가하기 위해서 div.card를 여러개 더 추가하면 다음과 같이 된다.

만약 별을 반개만 주거나 빈칸으로 주고 싶다면 다음과 같이하면 된다.

                          <span><i class="fa fa-star-o"></i></span>
                          <span><i class="fa fa-star-half-o"></i></span>

'NODE.JS' 카테고리의 다른 글

아마존 E-commerce 클론 -3) rating, product파트 만들기 (0)	2021.05.26
아마존 E-commerce 클론 -2) 리액트 만들고 페이지 동적으로 만들기 (0)	2021.05.26
MERN 기본파일 만들기 - 14)LogoutPage 만들기, Auth 인증 체크하기 (0)	2021.05.24
Social Media 만들기 - 1)앱 만들기 전 Setup 하기 (0)	2021.05.20
OnlineShop 만들기 - 14) History 기능 만들기 (1)	2021.05.16

ABOUT ME

합니다, 개발공부📝 합니다, 개발공부📝

'NODE.JS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'NODE.JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바