[スパルタエンコーディングクラブ]私は初日を独りでエンコーディングしました

14870 ワード
コリン スパルタコードクラブ テキストリンク

...デザイナーもコードしなければならない時代。


私だけはコーディング能力がありません...😭
ずっと検索コード教育をしていたので、広告検索に登場した無料クリスマス独自コード教育.正式に受講を申請する前に、ついてきました.

[初日]html、cssの基本コンテンツを使用してログインページを作成する




いくつかの例を適用し、inputとbutton cssを変更してジョブをコミットします.
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

    <style>
        * {
            @font-face {
                 font-family: 'NEXON Lv1 Gothic OTF';
                 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NEXON Lv1 Gothic OTF.woff') format('woff');
                 font-weight: normal;
                 font-style: normal;
}
        }

        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;

            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }

        .wrap {
            margin: 10px auto;
            width: 300px;
        }

        .mybtn {
            /* Button/Primary */
            margin: 30px 0px 0px 0px;

            /* button */
            color: white;
            width: 300px;
            height: 50px;

            background-color: red;
            border-radius: 100px;
            border-color: red;

        }
        .line{
            width: 300px;
            align-items: center;
			border: none;
			border-bottom: solid 2px red;
		}
    </style>
</head>

<body>
    <div class="wrap">
        <div class="mytitle">
        </br> <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <div>
            <p>
                ID</br> <input type="text" class="line"/>
            </p>
            <p>
                PW</br> <input type="password" class="line" />
            </p>
        </div>
        <button class="mybtn">로그인하기</button>
    </div>

</body>


</html>

https://spartacodingclub.kr?f_name=%EA%B9%80%EB%AF%BC%EC%A0%95&f_uid=5f8c5ce0fbe84500092ad179
TIL 33,ココアクローン(CSS hack,CSS reset)
次のコードカバレッジ.脚本家のテストを使用して