[TIL_14] <project> webucks clone - html (1)

26405 단어 TILWeCodeprojectwebucksTIL

WeBucks 페이지 클론 프로젝트

Mission 2 완료

로그인 페이지 기능 구현

  • 로그인 페이지

    • 구글 폰트 링크 사용법
    • display:flex;, justify-content, align-items 사용하여 레이아웃 배치

  • 로그인 버튼 활성화 기능

    • 특정 조건 만족시 로그인 버튼 활성화 기능
      (이메일에 "@" 포함 & 비밀번호 8자리 이상)
    • 특정 조건 다시 불만족시 로그인 버튼 비활성화 기능
    • 조건 만족 후 버튼 클릭 이벤트 발생시 디테일 페이지 이동
// iput 태그에 접근
let input = document.getElementsByClassName('innerBox');

// button 태그에 접근
const button = document.getElementById('button');

// 버튼 활성화 기능 함수
function buttonActiv() {
    //이메일 input란에 입력되는 값
    const id = document.getElementById('id').value; 
    // pw input란에 입력되는 값
    const password = document.getElementById('password').value; 
    const button = document.getElementById('button');
    if (id.includes('@') && password.length >= 8) {
        button.style="cursor:pointer";
        button.disabled = false;
    } else {
        // 조건이 다시 불만족 되었을 시에 다시 비활성화 기능
        button.style="cursor:defalt"
        button.disabled = true;
    }
}

// 아이디란에 입력 발생시 함수 실행
input[0].addEventListener('keyup', buttonActiv);

// 비밀번호란에 입력 발생시 함수 실행
input[1].addEventListener('keyup', buttonActiv);


// button 클릭시 디테일 페이지로 이동하는 기능
button.addEventListener('click', function() {
    window.location.href = 'list.html'
})

  • 로그인페이지를 만들면서 HTML과 CSS를 활용해서
    기본적인 레이아웃 구성에 대해서 고민해보며 연습해 볼 수 있었다.

  • flex를 이용하면 레이아웃 구성이 편하다는 것을 알았다.

  • javascript를 통해서 dom에 접근하여 html 요소에 접근하거나
    추가하는 기능을 수행하면서 dom에 대한 이해를 높일수 있었다.

html 코드


<!DOCTYPE html>
<html lang="ko">
<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">
    <link rel="stylesheet" href="styles/login.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@400;700&display=swap" rel="stylesheet">
    <title>WEBUCKS</title>
</head>
<body>
    <section class="loginBox">
        <h1>WeBucks</h1>
        <form class="formBox">
            <input class="innerBox" id="id" type="text" placeholder="전화번호,사용자 이름 또는 이메일">
            <input class="innerBox" id="password" type="password" placeholder="비밀번호">
        </form>
        <section class="buttonBox">
            <button disabled id="button">로그인</button>
        </section>
        <section class="findPw">
            <a href="#">비밀번호를 잊으셨나요?</a>
        </section>
    </section>
    <script src="js/login.js"></script>
</body>
</html>

css 코드

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    background-color: hsl(180deg 3% 94%);
    margin: 40px;
}
.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 450px;
    border: 2px solid hsl(0deg 0% 87%);
    background-color: white;
}

h1 {
    margin-top: 80px;
    font-family: 'Montserrat Subrayada', sans-serif;
    font-size: 40px;
    font-weight: 700;
}

.formBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0 0;
}
.innerBox {
    border: 2px solid hsl(0deg 0% 87%);
    border-radius: 5px;
    background-color: hsl(0deg 0% 97%);
    width: 300px;
    height: 40px;
    margin: 10px 0;
    padding: 0 10px;
}

.buttonBox {
    margin: 10px;
}

#button {
    border: 2px solid #61aded;
    border-radius: 8px;
    width: 300px;
    height: 40px;
    padding: 0 10px;
    color: white;
    background-color: #61aded;
    font-size: 17px;
}

button:disabled {
    opacity: 0.4;
}

.findPw {
    margin: 120px 0 50px;
}

.findPw a {
    color: hsl(200deg 40% 60%);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
JavaScript | pre course 9-Function(함수)-데이터 받기
인증, 인가 1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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