이미지 이름과 경로 변경, 다운로드 기능 추가

aeea2b64 · shin · b5268c22 · aeea2b64 · aeea2b64
Commit aeea2b64 authored 2 years ago by shin
--- a/index.html
+++ b/index.html
@@ -12,9 +12,10 @@
      crossorigin="anonymous"
    />
-    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
+    <div>
      <div class="navbar navbar-dark bg-dark shadow-sm">
        <div class="container">
          <a href="#" class="navbar-brand d-flex align-items-center">
@@ -67,12 +68,18 @@
        </div>
        <div class="row">
          <div class="col">
-          <img src="./images/OutputImage2.png" alt="" />
+            <a href="./images/removeBgImage.png" download="다운로드"
+              ><img src="./images/removeBgImage.png" alt=""
+            /></a>
            <p>배경 삭제된 이미지</p>
+            <div class="">이미지를 누르면 다운로드 됩니다.</div>
          </div>
          <div class="col">
-          <img src="./images/OutputImage_black.png" alt="" />
+            <a href="./images/removeBgImage_black.png" download="다운로드"
+              ><img src="./images/removeBgImage_black.png" alt=""
+            /></a>
            <p>배경 검은색</p>
+            <div class="">이미지를 누르면 다운로드 됩니다.</div>
          </div>
        </div>
@@ -81,6 +88,8 @@
          배경 검정색
        </button>
      </div>
+    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"

--- a/style.css
+++ b/style.css
@@ -2,3 +2,8 @@
  max-width: 100%;
  margin-top: 20px;
 }
+button {
+  margin: 10px;
+  margin-bottom: 30px;
+}