diff --git a/index.html b/index.html
index 93f17355ff546dee271569334aab7d09a55f4dff..bd7bb485cd6288ce9143731317389b893fc28b06 100644
--- a/index.html
+++ b/index.html
@@ -12,75 +12,84 @@
crossorigin="anonymous"
/>
- <link rel="stylesheet" href="app.css" />
+ <link rel="stylesheet" href="style.css" />
</head>
<body>
- <div class="navbar navbar-dark bg-dark shadow-sm">
- <div class="container">
- <a href="#" class="navbar-brand d-flex align-items-center">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="20"
- height="20"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- aria-hidden="true"
- class="me-2"
- viewBox="0 0 24 24"
- >
- <path
- d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
- />
- <circle cx="12" cy="13" r="4" />
- </svg>
- <strong>Image processing </strong>
- </a>
- </div>
- </div>
- <div class="container text-center">
- <div class="row">
- <div class="col-lg-6">
- <img class="img-size" src="./images/man.jpg" alt="" />
- <p>원본 이미지 525 x 700 px</p>
- </div>
- <div class="col-lg-6">
- <img class="img-size" src="./images/man-Dall_E2.png" alt="" />
- <p>배경 확장된 이미지 1024 x 1024 px</p>
+ <div>
+ <div class="navbar navbar-dark bg-dark shadow-sm">
+ <div class="container">
+ <a href="#" class="navbar-brand d-flex align-items-center">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ fill="none"
+ stroke="currentColor"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ aria-hidden="true"
+ class="me-2"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+ />
+ <circle cx="12" cy="13" r="4" />
+ </svg>
+ <strong>Image processing </strong>
+ </a>
</div>
</div>
- <div class="row">
- <div class="col">
- <img class="img-size" src="./images/man.jpg" alt="" />
- <p>Person</p>
+ <div class="container text-center">
+ <div class="row">
+ <div class="col-lg-6">
+ <img class="img-size" src="./images/man.jpg" alt="" />
+ <p>원본 이미지 525 x 700 px</p>
+ </div>
+ <div class="col-lg-6">
+ <img class="img-size" src="./images/man-Dall_E2.png" alt="" />
+ <p>배경 확장된 이미지 1024 x 1024 px</p>
+ </div>
</div>
- <div class="col">
- <img class="img-size" src="./images/man-top.jpg" alt="" />
- <p>Top</p>
+ <div class="row">
+ <div class="col">
+ <img class="img-size" src="./images/man.jpg" alt="" />
+ <p>Person</p>
+ </div>
+ <div class="col">
+ <img class="img-size" src="./images/man-top.jpg" alt="" />
+ <p>Top</p>
+ </div>
+ <div class="col">
+ <img src="./images/man_panorama_withFace.png" alt="" />
+ <p>panorama_withFace</p>
+ </div>
</div>
- <div class="col">
- <img src="./images/man_panorama_withFace.png" alt="" />
- <p>panorama_withFace</p>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <img src="./images/OutputImage2.png" alt="" />
- <p>배경 삭제된 이미지</p>
+ <div class="row">
+ <div class="col">
+ <a href="./images/removeBgImage.png" download="다운로드"
+ ><img src="./images/removeBgImage.png" alt=""
+ /></a>
+ <p>배경 삭제된 이미지</p>
+ <div class="">이미지를 누르면 다운로드 됩니다.</div>
+ </div>
+ <div class="col">
+ <a href="./images/removeBgImage_black.png" download="다운로드"
+ ><img src="./images/removeBgImage_black.png" alt=""
+ /></a>
+ <p>배경 검은색</p>
+ <div class="">이미지를 누르면 다운로드 됩니다.</div>
+ </div>
</div>
- <div class="col">
- <img src="./images/OutputImage_black.png" alt="" />
- <p>배경 검은색</p>
- </div>
- </div>
- <button type="button" class="btn btn-primary btn-lg">배경 흰색</button>
- <button type="button" class="btn btn-secondary btn-lg">
- 배경 검정색
- </button>
+ <button type="button" class="btn btn-primary btn-lg">배경 흰색</button>
+ <button type="button" class="btn btn-secondary btn-lg">
+ 배경 검정색
+ </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"
diff --git a/style.css b/style.css
index ae58148f5d40e4e83d337d4a8d786d9e367caad5..6102ce1ed279432e146ef56ded8915fa5fdc9b7f 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,8 @@
max-width: 100%;
margin-top: 20px;
}
+
+button {
+ margin: 10px;
+ margin-bottom: 30px;
+}