2022-04-18

9673 ワード

スパルタクラウド教育に初めて触れ、9 am~9 pmの授業を始めた初日です.グダ町のような慣れない方法で異なる分野の人と会って、html、cssとのコラボレーションに必要なgitを学びました.

HTML


ほねぐみきそ

CSS


HTMLの整理方法

Javascript


HTMLとCSSに動的動作を追加する方法

結果


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>홈페이지 이름</title>
    <style>
        .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;
        }
    </style>
</head>

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

</html>