login.html form태그와 label태그로 변경 및 비밀번호 가림 이미지 추가와 그에 맞는 css 적용

codeit-bootcamp-frontend · Nov 6, 2024 · 3816e1b · 3816e1b
1 parent 0c982da
commit 3816e1b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 36 deletions.
diff --git a/css/login.css b/css/login.css
@@ -58,39 +58,51 @@ h1 {
   width: 100%;
 }
 
-.input-email__container,
-.input-password__container {
+.form__container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.form__group {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
 }
 
-.input-email,
-.input-password {
+.form__group-input {
   height: 56px;
   border-radius: 12px;
   border: 0px;
   background-color: #f3f4f6;
   padding: 15px 24px;
+  width: 100%;
 }
 
-.input-email,
-.input-password,
-.input-email::placeholder,
-.input-password::placeholder {
+.form__group-input,
+.form__group-input::placeholder {
   font-size: 16px;
   line-height: 26px;
   font-weight: 400;
 }
 
-.input-email__text,
-.input-password__text {
+.form__group-label {
   font-size: 18px;
   font-weight: 700;
   line-height: 26px;
 }
 
+.form__group-input-container {
+  position: relative;
+}
+
+.form__group-img {
+  position: absolute;
+  right: 24px;
+  top: 15px;
+}
+
 .login-button {
   width: 100%;
   height: 56px;
@@ -104,9 +116,14 @@ h1 {
   font-size: 20px;
   line-height: 32px;
   font-weight: 600;
+  border: 0;
+}
+
+.login-button:hover {
+  cursor: pointer;
 }
 
-.sns-login__container {
+.social-login__container {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -116,14 +133,14 @@ h1 {
   background-color: #e6f2ff;
 }
 
-.sns-login__icon {
+.social-login__icon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
 }
 
-.sns-login__container > p {
+.social-login__container > p {
   font-size: 16px;
   line-height: 26px;
   font-weight: 500;

diff --git a/login.html b/login.html
@@ -16,40 +16,50 @@
         <a href="/" class="logo__link"><h1>판다마켓</h1></a>
       </header>
       <div class="login__container">
-        <div class="input-email__container">
-          <p class="input-email__text">이메일</p>
-          <input
-            type="text"
-            placeholder="이메일을 입력해주세요"
-            class="input-email"
-          />
-        </div>
-        <div class="input-password__container">
-          <p class="input-password__text">비밀번호</p>
-          <input
-            type="password"
-            name="userPassword"
-            id="password"
-            placeholder="비밀번호를 입력해주세요"
-            class="input-password"
-          />
-        </div>
-        <a href="" class="login-button">로그인</a>
-        <div class="sns-login__container">
+        <form action="/login" method="POST" class="form__container">
+          <div class="form__group">
+            <label class="form__group-label" for="focus">이메일</label>
+            <input
+              type="email"
+              placeholder="이메일을 입력해주세요"
+              class="form__group-input"
+              name="email"
+            />
+          </div>
+          <div class="form__group">
+            <label class="form__group-label" for="focus">비밀번호</label>
+            <div class="form__group-input-container">
+              <input
+                type="password"
+                name="password"
+                id="password"
+                placeholder="비밀번호를 입력해주세요"
+                class="form__group-input"
+              />
+              <img
+                src="/img/btn_visibility_on_24px.png"
+                alt="비밀번호 가림 이미지"
+                class="form__group-img"
+              />
+            </div>
+          </div>
+          <button type="submit" class="login-button">로그인</button>
+        </form>
+        <div class="social-login__container">
           <p>간편 로그인하기</p>
-          <div class="sns-login__icon">
+          <div class="social-login__icon">
             <a href="https://www.google.com/">
               <img
                 src="/img/google-icon.png"
                 alt="구글 아이콘"
-                class="sns-login__google-icon"
+                class="social-login__google-icon"
               />
             </a>
             <a href="“https://www.kakaocorp.com/page/">
               <img
                 src="/img/kakaotalk-icon.png"
                 alt="카카오톡 아이콘"
-                class="sns-login__kakao-icon"
+                class="social-login__kakao-icon"
               />
             </a>
           </div>