[CSS] 10. Input 디자인

Mar 10, 2025


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .btn-red {
            background-color: rgb(231, 96, 96);
        }

        .btn-green {
            background-color: green;
        }

        .btn {
            border: 0;
            color: white;
            width: 70px;
            height: 45px;
            font-weight: 700;
            border-radius: 6px;
        }

        .btn-elevated {
            box-shadow: 3px 3px 3px 0px rgb(167, 164, 164);
            /*x축 y축  블러 퍼짐 색깔*/
        }

        .btn-google {
            background-color: white;
            width: 400px;
            height: 45px;
            font-size: 15px;
            font-weight: 700;
            border-radius: 6px;
            border: 1px solid black;
            cursor: pointer;
        }

        input {
            height: 40px;
            width: 300px;
            border-radius: 4px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h3>빨간색 버튼</h3>
    <button class="btn btn-red">검색</button>
    <h3>플로팅 버튼</h3>
    <button class="btn btn-red btn-elevated">버튼</button>
    <h3>초록 플로팅 버튼</h3>
    <button class="btn btn-green btn-elevated">초록 버튼</button>
    <h3>구글 버튼</h3>
    <button class="btn-google">
        <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false"
            style="height: 18px; width: 18px; display: inline-block;">
            <g fill="none" fill-rule="evenodd">
                <path
                    d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z"
                    fill="#EA4335"></path>
                <path
                    d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z"
                    fill="#4285F4"></path>
                <path
                    d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z"
                    fill="#FBBC05"></path>
                <path
                    d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z"
                    fill="#34A853"></path>
                <path d="M0 0h18v18H0V0z"></path>
            </g>
        </svg>
        구글 계정으로 로그인
    </button>
    <h3>이모지 인풋</h3>
    <input type="text" placeholder=" 🔎 Search...">
</body>

</html>


<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>검색 입력 필드</title>
    <style>
        .search-box {
            display: flex;
            align-items: center;
            border: 2px solid #ccc;
            border-radius: 5px;
            padding: 8px;
            width: 300px;
        }

        .search-box img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        .search-box input {
            border: none;
            outline: none;
            font-size: 16px;
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="search-box">
        <img src="https://em-content.zobj.net/thumbs/120/google/350/magnifying-glass-tilted-left_1f50d.png"
            alt="search-icon">
        <input type="text" placeholder="Search...">
    </div>

</body>

</html>

See more posts

[CSS] 10. Input 디자인

More articles

[CSS] 12. 아이콘 & 스타일 시트

[CSS] 11. Position

[CSS] 9. Grid-column

[CSS] 8. Grid-gap