CNU-Likelion · thdtmdrud · Mar 24, 2024 · Mar 24, 2024 · Mar 24, 2024
diff --git a/README.md b/README.md
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,19 @@
+# 3주차 배운 내용
+
+## style="display: none"
+
+> display 보이게 하기
+> document.getElementById("").style.display = 'block';
+
+> display 감추기
+> document.getElementById("").style.display = 'none';
+
+## 객체 선언
+
+> const userInfo = {
+
+    name: 이름,
+    age: 나이,
+    email: 이메일,
+
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./src/pages/style.css" />
+    <title>사용자 정보 관리 시스템</title>
+  </head>
+
+  <body>
+    <main>
+      <h1 class="title">사용자 정보 관리 시스템</h1>
+      <br>
+      <section class="section__input">
+        <div>
+          <p1 class="section__name" id="name-label">이름</p1>
+          <input class="section__name" id="name-input" type="text" />
+        </div>
+        <div>
+          <p1 class="section__age" id="age-label">나이</p1>
+          <input class="section__age" id="age-input" type="number" />
+        </div>
+        <div>
+          <p1 class="section__email" id="email-label">이메일</p1>
+          <input class="section__email" id="email-input" type="email" />
+        </div>
+        <button class="section__button" id="button-submit" type="button">
+          제출
+        </button>
+        <br />
+        <button class="section__button" id="button-show" type="button">
+          보기
+        </button>
+      </section>
+      <br />
+      <section class="section__userInfo" style="display: none">
+        <h2>사용자 정보</h2>
+        <br />
+        <div>
+          <p id="userInfo_name"></p>
+        </div>
+        <br />
+        <div>
+          <p id="userInfo_age"></p>
+        </div>
+        <br />
+        <div>
+          <p id="userInfo_email"></p>
+        </div>
+      </section>
+
+      <script src="./src/pages/script.js"></script>
+    </main>
+  </body>
+</html>
diff --git a/src/pages/index.html b/src/pages/index.html
diff --git a/src/pages/script.js b/src/pages/script.js
@@ -0,0 +1,26 @@
+const nameInput = document.getElementById("name-input");
+const ageInput = document.getElementById("age-input");
+const emailInput = document.getElementById("email-input");
+const submitButton = document.getElementById("button-submit");
+const showButton = document.getElementById("button-show");
+const showUserInfo = document.querySelector(".section__userInfo");
+
+submitButton.addEventListener("click", function () {
+  const userInfo = {
+    name: nameInput.value,
+    age: ageInput.value,
+    email: emailInput.value,
+  };
+});
+
+showButton.addEventListener("click", function () {
+  const userInfoName = document.getElementById("userInfo_name");
+  const userInfoAge = document.getElementById("userInfo_age");
+  const userInfoEmail = document.getElementById("userInfo_email");
+
+  userInfoName.textContent = "이름: " + nameInput.value;
+  userInfoAge.textContent = "나이: " + ageInput.value;
+  userInfoEmail.textContent = "이메일: " + emailInput.value;
+
+  showUserInfo.style.display = "block";
+});
diff --git a/src/pages/style.css b/src/pages/style.css
@@ -0,0 +1,14 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 40px;
+  font-weight: 700;
+}
diff --git a/화면 기록 2024-03-19 오후 7.12.57.mov b/화면 기록 2024-03-19 오후 7.12.57.mov