From 084f68e45511362b83e744ff282e153c4302a82a Mon Sep 17 00:00:00 2001 From: jeonghyeonmin1 Date: Tue, 2 Apr 2024 12:55:48 +0900 Subject: [PATCH] =?UTF-8?q?4=EC=A3=BC=EC=B0=A8=20=EA=B3=BC=EC=A0=9C=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.css | 127 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 36 ++++++++++++++ index.js | 15 ++++++ src/index.html | 10 ---- 4 files changed, 178 insertions(+), 10 deletions(-) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js delete mode 100644 src/index.html diff --git a/index.css b/index.css new file mode 100644 index 00000000..0356897e --- /dev/null +++ b/index.css @@ -0,0 +1,127 @@ +body{ + background-color: hsl(0, 100%, 74%); + font-family: "Poppins", sans-serif; + font-size:16px; +} + +.container{ + position:absolute; + display:flex; + width:80%; + height:80%; + left:10%; + top:10%; + +} + +.container__left{ + position:relative; + width:40%; + height:50%; + top:30%; + margin-left:100px; + color:white; +} + +.container__left__title{ + font-weight:700; + font-size:48px; +} + +.container__left__subtitle{ + margin-top:30px; +} + + +.container__right{ + margin-top:5%; + width:40%; +} + +.container__right__title{ + display:flex; + justify-content: center; + height:8%; + line-height:60.47px; + background-color:hsl(248, 32%, 49%); + border-radius:5px; + color:white; +} + +.container__right__title__front{ + font-weight: 600; +} + +.container__right__title__back{ + font-weight: 300; +} + +.container__right__login{ + margin-top:5%; + height:70%; + background-color: white; + border-radius: 5px; + display:flex; + flex-direction: column; + align-items: center; +} + +.login__firstname{ + margin-top:5%; + border:1px solid black; + border-radius: 5px; + width:90%; + height:10%; +} + +.login__Lastname{ + margin-top:3%; + border:1px solid black; + border-radius: 5px; + width:90%; + height:10%; +} + +.login__EmailAddress{ + margin-top:3%; + border:1px solid black; + border-radius: 5px; + width:90%; + height:10%; +} + +.login__Password{ + margin-top:3%; + border:1px solid black; + border-radius: 5px; + width:90%; + height:10%; +} + +.login__button{ + margin-top:3%; + border:1px solid hsl(154, 59%, 51%); + background-color: hsl(154, 59%, 51%); + border-radius: 5px; + width:90%; + height:10%; + font-weight: 600; + font-size:15px; + color:white; +} + +.login__explain{ + display:flex; + font-weight: 600; + margin-top: 20px; +} + +.login__explain__front{ + color:#a0a0a0; + opacity: 0.3; +} + +.login__explain__back{ + color:red; +} + diff --git a/index.html b/index.html new file mode 100644 index 00000000..9a0b4a23 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + + + + +
+
+
Learn to code by
watching others
+
See how experienced developers solve problems in real-time.
+ Watching scripted tutorials is great, but understanding how
+ developers think is invaluable. +
+
+ +
+
Try it free 7 days
 then S20/mo. thereafter
+ +
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..8e3774ac --- /dev/null +++ b/index.js @@ -0,0 +1,15 @@ +let first_name = document.querySelector(".login__firstname"); +let last_name = document.querySelector(".login__Lastname"); +let email_address = document.querySelector(".login__EmailAddress"); +let password = document.querySelector(".login__Password"); + +const button = document.querySelector(".login__button"); + +const print = () => { + console.log("성 : " + first_name.value); + console.log("이름 : " + last_name.value); + console.log("이메일 주소 : " + email_address.value); + console.log("비밀번호 : " + password.value); +} + +button.addEventListener('click',print); diff --git a/src/index.html b/src/index.html deleted file mode 100644 index edea5558..00000000 --- a/src/index.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - -