diff --git a/HW UI.html b/HW UI.html
new file mode 100644
index 0000000..b773413
--- /dev/null
+++ b/HW UI.html	
@@ -0,0 +1,90 @@
+<!-- HW UI: head의 제목과 참조할 링크 그리고 코드의 간격 설정 확인 필요함-->
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>HW UI</title>
+        <meta name="description" content="Web UI Testing">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="apple-touch-icon" href="apple-touch-icon.png">
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="css/fontAwesome.css">
+        <link rel="stylesheet" href="css/light-box.css">
+        <link rel="stylesheet" href="css/templatemo-style.css">
+        <!-- HW UI CSS 파일-->
+        <link rel="stylesheet" href="css/HW.css">
+        <link href="https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900" rel="stylesheet">
+        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
+    </head>
+    <!--그림에 따른 코드-->
+    <body>
+        <div class="container">
+            <!-- 소재명-->
+            <div class="fabric">
+                <article id="fabricQuery">
+                    <h4><b>소재명</b></h4>
+                </article>
+            </div>
+            <!-- 소재정보-->
+            <div class="fabricInfo">
+                <article id="fabricInfoQuery">
+                    <h4><b>소재정보</b></h4>
+                    <h4>테이블의 쿼리내용을 표현할 공간</h4>
+                    <h4>테이블의 쿼리내용1</h4>
+                    <h4>테이블의 쿼리내용2</h4>
+                </article>
+            </div>
+            <!--세탁 유의사항-->
+            <div class="washInst">
+                <article id="washInstQuery">
+                    <h4><b>세탁 유의사항</b></h4>
+                    <h4>테이블의 쿼리내용을 표현할 공간</h4>
+                    <h4>테이블의 쿼리내용1</h4>
+                    <h4>테이블의 쿼리내용2</h4>
+                </article>
+            </div>
+            <!--나만의 팁 추가하기-->
+            <div class="tips">
+                <h4><b>나만의 팁 추가하기</b></h4>
+                <form class="submit">
+                    <div class="textBox">
+                        <input type="text" id="text" placeholder="나만의 팁 추가하기"></input>
+                        <button type="button" class="btm_image" id="img_btn"><img src="img/submit.jpg"></button>
+                    </div>
+                </form>           
+            </div>
+            <!--세탁방법-->
+            <div class="washMeth">
+                <h4><b>세탁방법</b></h4>
+                <article id="washMethQuery">
+                    <h4>테이블의 쿼리내용을 표현할 공간</h4>
+                    <h4>테이블의 쿼리내용1</h4>
+                    <h4>테이블의 쿼리내용2</h4>
+                </article>
+            </div>
+            <!--세탁 정보-->
+            <div class="detInfo">
+                <h4><b>세탁정보</b></h4>
+                <article id="detInfoQuery">
+                <h4>테이블의 쿼리내용을 표현할 공간</h4>
+                <h4>테이블의 쿼리내용1</h4>
+                <h4>테이블의 쿼리내용2</h4>
+            </article>
+            </div>
+        </div>
+        <footer style="background-color:white;">
+            <div class="container-fluid">
+                <div class="col-md-12">
+                    <p style="color:black; background-color:white; font-size: 15px;padding-bottom: 20px;">Copyright &copy; 2021 | GNU CS BBOSONG </p>
+                </div>
+            </div>
+        </footer>
+    </body>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
+        <script src="js/vendor/bootstrap.min.js"></script>
+        <script src="js/plugins.js"></script>
+        <script src="js/main.js"></script>
+</html>
\ No newline at end of file
