๐Ÿ’œ HTML,CSS

HTML&CSS ์‹ค์Šต9 (์ •๋ฆฌx)

Genie_. 2024. 3. 23. 22:21
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>๋กœ๊ทธ์ธ | FILA</title>
    <link rel="stylesheet" href="240321_๋กœ๊ทธ์ธ์ฐฝ๋‹ต.css">
    <script src="https://kit.fontawesome.com/d19fdaba43.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
    <h1>๋กœ๊ทธ์ธ</h1>
    <form>
        <label class="id-label form-label">
            <input type="text">
        </label>
        <label class="pw-label form-label">
            <input type="password">
            <i class="fa-solid fa-eye"></i>
        </label>

        <section>
            <label class="id-check-label">
                <input type="checkbox">
                <span>์•„์ด๋””์ €์žฅ</span>
            </label>

            <a href="#" class="id-pw-find">์•„์ด๋””/๋น„๋ฐ€๋ฒˆํ˜ธ ์ฐพ๊ธฐ</a>
        </section>
        <button class="form-btn" id="login-btn">๋กœ๊ทธ์ธ</button>
    </form>

    <section class="social-login-section">
        <button class="naver-login">
            <img src="./icons/๋„ค์ด๋ฒ„.png" alt="#">
            <span>๋„ค์ด๋ฒ„๋กœ ๋กœ๊ทธ์ธํ•˜๊ธฐ</span>
        </button>
        <button class="toss-login">
            <img src="./icons/ํ† ์Šค.png" alt="#">
            <span>ํ† ์Šค๋กœ ๋กœ๊ทธ์ธํ•˜๊ธฐ</span>
        </button>
    </section>
    <hr>
    <button class="form-btn" id="register-btn">ํšŒ์›๊ฐ€์ž…</button>
</main>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main{
    border: 2px solid black;
    border-radius: 10px;
    padding: 50px 50px;
    /*background-color: #ABCCCA;*/
    width: 600px;
    margin: 0 auto;
}

h1{
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

form{
    display: flex;
    flex-direction: column;
}
.form-label{
    display: flex;
    align-items: center;
    margin: 2px 0;
    padding: 10px 15px;
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
}
.form-label input{
    border: none;
    width: 100%;
    font-size: 20px;
}
.form-label input:focus{
    outline: none;
}

.form-label i{
    font-size: 20px;
    cursor: pointer;
}
/* ์ฒดํฌ๋ฐ•์Šค๋ž‘ ์•„์•„์ด๋””์ฐพ๊ธฐ์žˆ๋Š” section */
form > section{
    display: flex;
    margin: 10px 0;
    justify-content: space-between;
}
.id-check-label{
    display: flex;
    align-items: center;
    font-size: 15px;
}
.id-check-label input{
    margin-right: 5px;
}
.id-pw-find{
    color: rgba(0,0,0,0.6);
    font-size: 15px;
}
.form-btn{
    margin: 10px 0;
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    border: none;
    color: white;
    background-color: midnightblue;
    border-radius: 20px;
    cursor: pointer;
}
.form-btn:hover{
    opacity: 0.9;
}
/************************/
.social-login-section{
    display: flex;
    margin: 10px 0;
}
.social-login-section button{
    display: flex;
    padding: 8px 25px;
    align-items: center;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.5);
    background-color: white;
    cursor: pointer;
}
.social-login-section button:hover{
    background-color: #AABCBB22;
}
.social-login-section img{
    width: 25px;
    margin-right: 10px;
}
.naver-login{
    flex: 1; /* ํ•œ ์ค„์˜ ๊ณต๋ฐฑ์„ ๋‹ค ์ฐจ์ง€ํ•œ๋‹ค. */
    margin-right: 10px;
}

.toss-login{
    flex: 1;
}

hr{
    margin: 30px 0 20px 0;
    border: 1px solid black;
}

#register-btn{
    width: 100%;
    background-color: white;
    border: 1px solid black;
    color: black;
    transition-duration: 0.2s;
}
#register-btn:hover{
    border-color: unset;
    background-color: midnightblue;
    color: white;
}

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€