레벨 테스트 로그인 화면 만들기

sang969 2023. 7. 14. 14:44

html 과 css를 활용하여 구현하라.

!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="public/login2.css">
</head>
<body>
    <div id="login_wrapper">
        <h2>Login</h2>
        <form id="login_form">
            <p>너의이름</p>
            <input type="text" name="userName" placeholder="요기에 입력">
            <p>비밀번호</p>
            <input type="password" name="userPassword" placeholder="요기에 입력">
           <input type="submit" value="로그인 버튼" id="login_form_submit">
        </form>
    </div>

    
</body>
</html>

CSS

body{
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
}

#login_wrapper {
    width: 30rem;
    height: 25rem;
    padding: 40px;
    box-sizing: border-box;
}
p {
     font-size: 1rem;
     color: black;
     margin-bottom: 10px;
}

#login_wrapper > h2 {
    font-size: 2rem;
    color: black;
    margin-bottom: 20px;
    margin-left: 150px;
}

#login_form > input {
    width: 100%;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: 0.5rem;
    background-color: #f8f8f8;
}

#login_form > input[type="submit"] {
    color: #fff;
    font-size: 1rem;
    background-color: #24795d;
    margin-top: 20px;
}