(연습)로그인 페이지

30535 단어 CSShtml연습JavaScriptCSS

https://www.youtube.com/watch?v=dWfpp-0riYA

로그인 페이지

👨‍💻 HTML 분석

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인</title>
    <link rel="stylesheet" href="../css/login.css">
    <script src="../lib/jquery-3.6.0.min.js"></script>
</head>
<body>
    <section class="login-form">
        <h1>Login</h1>
        <form action="">
            <div class="int-area">
                <input type="text" name="id" id="id" autocomplete="off" required>
                <label for="id">USER NAME</label>
            </div>
            <div class="int-area">
                <input type="password" name="pw" id="pw" autocomplete="off" required>
                <label for="pw">PASSWORD</label>
            </div>
            <div class="btn-area">
                <button id="btn" type="submit">LOGIN</button>
                
            </div>
        </form>
        <div class="caption">
            <a href="">Forgot Password?</a>
            <a href="">회원가입</a>
        </div>
    </section>

    <script>       
        let id = $('#id');
        let pw = $('#pw');
        let btn = $('#btn');
        
        $(btn).on('click', function() {
            if($(id).val() == "") {
                $(id).next('label').addClass('warning');
                setTimeout(function() {
                    $('label').removeClass('warning');
                }, 1500);
            }
            else if($(pw).val() == "") {
                $(pw).next('label').addClass('warning');
                setTimeout(function() {
                    $('label').removeClass('warning');
                }, 1500);
            }
        });
    </script>           
</body>
</html>

유튜브를 보면서 간단한 클론(?) 코딩을 해보니 생각보다 박스가 세분화되어서 페이지가 구성된다는 것을 알았다.

  • id 속성 vs class 속성

class 속성은 어떤 분류 안에 포함된 요소의 특성을 정의하는데 사용된다.
id 속성은 어떤 요소에 대한 유일한 특성을 정의한다.(HTML 문서에 특정 id 속성값은 오직 하나만 있어야 한다.)

  • id, name, class 등 다양한 속성값에 대한 공부가 필요하다.

👨‍💻 CSS 분석

css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-form h1 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 50px;
}

.int-area {
  width: 400px;
  position: relative;
  margin-top: 20px;
}

.int-area:first-child {
  margin-top: 0;
}

.int-area input {
  width: 100%;
  padding: 20px 10px 10px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid black;
  font-size: 18px;
  outline: none;
}

.int-area label {
  position: absolute;
  left: 10px;
  top: 15px;
  font-size: 18px;
  transition: top 0.5s ease;
}

.int-area label.warning {
  color: red !important;
  animation: warning 0.3s ease;
  animation-iteration-count: 3;
}

@keyframes warning {
  0% {
    transform: translateX(-8px);
  }
  25% {
    transform: translateX(8px);
  }
  50% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

.int-area input:focus + label,
.int-area input:valid + label {
  top: -2px;
  font-size: 13px;
  color: #166caa;
}

.btn-area {
  margin-top: 30px;
}

.btn-area button {
  width: 100%;
  height: 50px;
  margin: 0px 10px;
  color: #fff;
  background: #166caa;
  border: none;
  border-radius: 20px;
  font-size: 20px;
  cursor: pointer;
}

.caption {
  margin-top: 20px;
  text-align: center;
}

.caption a {
  margin: 0 20px;
  font-size: 15px;
  color: blue;
  text-decoration: none;
}
  • .login-form h1, .btn-area button

위와 같은 형태로 login-form 클래스에 있는 h1 과 btn-area button 클래스에 있는 button의 css디자인을 적용해 줄 수 있다.

  • flex?

기본 축은 row 이고, 반대 축은 column이다.

justify-content로 기본 축에 대한 정렬을 정의하고, align-items로 반대 축에 대한 정렬을 정의한다.

  • text-decoration: none;

a 태그와 같이 기본적으로 밑줄 같은 효과가 적용되어 있는 것을 없애준다.

  • outline: none;

선택된 요소가 강조되는 것을 없애준다.
text 요소의 경우 input의 border가 두꺼워지면서 강조가 되는데 none을 적용하면 border가 두꺼워지지않는다.

[TIL] Redux 구조 공부
[CS] Git 보충 설명 Day-11

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage