diff --git a/minkyong/JavaScript Study/app.js b/minkyong/JavaScript Study/app.js
new file mode 100644
index 0000000..8608aff
--- /dev/null
+++ b/minkyong/JavaScript Study/app.js
@@ -0,0 +1,16 @@
+const loginForm = document.querySelector("#login-form");
+const loginInput = document.querySelector("#login-form input");
+const greeting = document.querySelector("#greeting");
+
+const HIDDEN_CLASSNAME = "hidden";
+
+function onLoginSubmit(event){
+ event.preventDefalut();
+ loginForm.classList.add("hidden");
+ const username = loginInput.value;
+ greeting.innterText = "Hello" + username;
+ greeting.classList.remove("hidden");
+}
+
+loginForm.addEventListener("submit", onLoginSubmit);
+
diff --git a/minkyong/JavaScript Study/index.html b/minkyong/JavaScript Study/index.html
new file mode 100644
index 0000000..ed887de
--- /dev/null
+++ b/minkyong/JavaScript Study/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/minkyong/JavaScript Study/style.css b/minkyong/JavaScript Study/style.css
new file mode 100644
index 0000000..a9dab13
--- /dev/null
+++ b/minkyong/JavaScript Study/style.css
@@ -0,0 +1,76 @@
+*{
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ /* text-decoration: none; */
+ box-sizing: border-box;
+}
+
+.hidden{
+ display: none;
+}
+
+body{
+ font-size: 14px;
+}
+.Login{
+ width: 400px;
+ height: 350px;
+ padding: 40px;
+ margin: 0 auto;
+}
+
+.Login > h2{
+ font-size: 24px;
+ color: #00c234;
+ margin-bottom: 20px;
+
+}
+#login-form > input{
+ width: 100%;
+ height: 48px;
+ padding: 0 10px;
+ box-sizing: border-box;
+ margin-bottom: 16px;
+ border-radius: 6px;
+}
+#login-form > input::placeholder{
+ color: #D2D2D2;
+}
+#login-form > input[type="submit"]{
+ /* width: 100%;
+ height: 48px;
+ border-radius: 6px; */
+ color: #fff;
+ font-size: 16px;
+ background-color: #00c234;
+ margin-top: 20px;
+ border: none;
+ cursor: pointer;
+}
+
+#login-form > input[type="checkbox"]{
+ display: none;
+}
+#login-form > label{
+ color: #999999;
+}
+
+
+
+
+
+
+
+/* #login-form input[type="checkbox"] + label{
+ cursor: pointer;
+ padding-left: 26px;
+ background-image: url("checkbox.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+#login-form input[type="checkbox"]:checked + label{
+ background-image: url("checkbox-active.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+} */
\ No newline at end of file