[CRUD을 이용한 File upload Web] (6) ejs로 메인 상단 목록 틀 만들기

<본 블로그는 DCodeMania 의 유튜브를 참고해서 공부하며 작성하였습니 :-)>

=> CRUD App With Image Upload Using NodeJs, ExpressJs, MongoDB & EJS Templating Engine

 

 

🥕 메인 페이지 상단 목록 틀 잡기

🐧 views/index.ejs

<%- include("layout/header") %>

  <div class="container">
    <div class="row my-4">
      <div class="col-lg-12">
        <div class = "table-responsive">
          <!-- 화면 크기에 따라 효과적으로 콘텐츠가 표시되도록 테이블을 조정 -->
          <table class = "table table-striped">
            <!-- 테이블의 열의 머리글인 행들의 집합 -->
            <thead class = "table table-striped text-center">   
              <tr class = "table-dark">
                <th>ID</th>
                <th>Image</th>
                <th>Name</th>
                <th>E-mail</th>
                <th>Phone</th>
                <th>Action</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>1</td>
                <td><img src = "" alt = ""></td>
                <td>gani</td>
                <td>gani@test.com</td>
                <td>010-1234-1234</td>
                <td>
                  <a href = "" class = "text-success"><i class = "fas fa-edit fa-lg mx-1"></i></a>
                  <a href = "" class = "text-danger"><i class = "fas fa-trash fa-lg mx-1"></i></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>