웹 풀스택

쇼핑몰 만들기 - HTML

kevinmj12 2025. 2. 5. 14:28

간단한 작업을 통해 쇼핑몰을 만들어보자.

프론트엔드로는 기본 HTML, CSS, Javascript를 사용할 것이고,

백엔드로는 Node.js를 사용할 것이다.

 

기본 웹페이지 제작

HTML과 CSS를 통해 웹페이지의 뼈대를 만들어보자.

먼저 메인 페이지이다.

<!-- main.html -->

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Main</title>
  </head>
  <body>
    <h1>Tennis Market</h1>
    <div>
      Welcome to Tennis Market! <br />
      Enjoy your shopping!
      <br />
      <br />
      <a> order list </a>
    </div>
    <div class="card">
      <img class="card_img" src="./img/redRacket.png" />
      <p class="card_title">Red Racket</p>
      <input
        class="card_button"
        type="button"
        value="order"
        onclick="alert(1)"
      />
    </div>
    <div class="card">
      <img class="card_img" src="./img/blueRacket.png" />
      <p class="card_title">Red Racket</p>
      <input
        class="card_button"
        type="button"
        value="order"
        onclick="alert(2)"
      />
    </div>
    <div class="card">
      <img class="card_img" src="./img/blackRacket.png" />
      <p class="card_title">Red Racket</p>
      <input
        class="card_button"
        type="button"
        value="order"
        onclick="alert(3)"
      />
    </div>
  </body>
</html>

 

 

다음으로 주문 목록 페이지이다.

주문 목록 페이지에서는 <table> 태그를 사용하였는데, table에 대한 자세한 설명은 다음과 같다.

<table> : 데이터 표를 만드는 태그

- <th 태그> : 테이블의 제목을 만드는 태그 (table head의 약자, 기본값으로 굵은 글씨체)
- <tr 태그> : 테이블의 행을 만드는 태그 (table row의 약자)
- <td 태그> : 테이블의 셀을 만드는 태그 (table data의 약자, 기본값으로 보통 글씨체 )

 

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Order List</title>
    <style>
      h1 {
        text-align: center;
      }
      table {
        margin-left: auto;
        margin-right: auto;
      }
      div {
        text-align: center;
        margin-bottom: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Order List</h1>
    <div>
      <a href="./main.html">GO Home</a>
    </div>

    <table style="border: 1px solid black">
      <tr>
        <th>No</th>
        <th>Product</th>
        <th>Description</th>
        <th>Price</th>
        <th>Order date</th>
      </tr>

      <!-- 첫 번째 행 -->
      <tr>
        <td>1</td>
        <td>product1</td>
        <td>description1</td>
        <td>price1</td>
        <td>date1</td>
      </tr>
      <!-- 두 번째 행 -->
      <tr>
        <td>2</td>
        <td>product2</td>
        <td>description2</td>
        <td>price2</td>
        <td>date2</td>
      </tr>
    </table>
  </body>
</html>

 

<table> 내의 첫 번째 <tr>에 <th>를 5개 넣어 No, Product, Description, Price, Order date에 해당되는 5개의 제목을 만들었다.

다음 <tr>들에는 <td>를 5개씩 넣어 5개의 데이터가 포함되어있는 행을 만들었다.