<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>농장</title>
    <link rel="stylesheet" href="css/farming.css">
  </head>
  <body>
    <header>
      <table class="headerMenu">
        <tr>
          <td>호미 구매</td>
          <td>물뿌리개 구매</td>
          <td>작물 판매</td>
          <td>설정</td>
        </tr>
      </table>
    </header>

    <main>
      <div class="fieldGrid">
        <div class="field"><img src="/asset/image/field.png" class="fieldImg"></div>
        <div class="field"><img src="/asset/image/field.png" class="fieldImg"></div>
        <div class="field"><img src="/asset/image/field.png" class="fieldImg"></div>

<!-- 밭 백개 생성-->

      </div>
    </main>
  <script src="/js/farming.js"></script>
  </body>
</html>

@font-face{
  font-family:soyoMapleBold;
  src: url(asset\font\SOYO_Maple_Bold.otf) format("opentype");
  src: url(asset\font\SOYO_Maple_Bold.ttf) format("truetype");
  font-weight:normal;
  font-style:normal;
}

/* 바디 */
body{
  margin:0;
}
/* 헤더 */
header{
  position:relative;
  top:0;
  left:0;

  width:100%;
  height:50px;

  background-color:black;

  display:flex;
  justify-content:center;
  align-items:center;
}

.headerMenu{
  width:50%;
  height:50%;
  border-collapse:collapse;

  color:white;
}

.headerMenu td{
  text-align:center;
}
/* 메인 */

.fieldGrid{
  display:grid;
  grid-template-rows:repeat(10, 1fr);
  grid-template-columns:repeat(10, 1fr);
}
.field{
  border:1px solid black;
}

.fieldImg{
  width:80px;
  height:80px;
  display:block;
}

이걸 실행하면 이렇게 나옴


저기 fieldgrid부분에 posi absolute 넣으면 밭 모양이 나오긴 나옴
그런데 그 밭을 중앙에 배치하고 싶음
어캄

아무리봐도 absolute넣어서 해결하는건 잘못된 방법같음
밭 하나하나 div로 만든건 아직 자바스크립트 잘 못해서 이렇게 만듬