styles-example/detail.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="./css/index.css" />
    <title>React Clean Code Shopping Cart</title>
  </head>
  <body>
    <div class="root">
      <header class="flex-col-center">
        <h1 class="global-nav-title">상품 상세</h1>
        <br />
        <div class="global-nav-button-box">
          <a class="global-nav-button" href="./index.html">홈으로</a>
          <a class="global-nav-button" href="./list.html">상품 목록</a>
          <a class="global-nav-button" href="./detail.html">상품 상세</a>
          <a class="global-nav-button" href="./cart.html">장바구니</a>
          <a class="global-nav-button" href="./order.html">주문/결제</a>
          <a class="global-nav-button" href="./orderList.html">주문 목록</a>
          <a class="global-nav-button" href="./orderDetail.html">주문 상세</a>
        </div>
      </header>
      <nav class="nav flex justify-around">
        <div class="flex-center">
          <h1 class="nav-title">CLEAN CODE SHOP</h1>
        </div>
        <div class="flex gap-15">
          <button class="nav-button">장바구니</button>
          <button class="nav-button">주문목록</button>
        </div>
      </nav>
      <div class="product-detail-container">
        <div class="flex-col-center w-520">
          <img
            class="w-480 h-480 mb-10"
            src="./assets/images/product.png"
            alt="PET보틀-정사각(420ml)"
          />
          <div class="product-detail-info">
            <span class="product-detail-info__name">PET보틀-정사각(420ml)</span>
            <hr class="divide-line-gray my-20" />
            <div class="flex justify-between">
              <span>금액</span>
              <span class="product-detail-info__price">43,000원</span>
            </div>
          </div>
          <button class="product-detail-button flex-center mt-20">
            장바구니
          </button>
        </div>
      </div>
    </div>
  </body>
</html>