第1週目コード開発ログ(1-5~1-7)

15798 ワード
明日の学習カード 国コード コード独学 スパルタコードクラブ テキストリンク
CSSベース
利用する
使用→クラス
  • 級ブランドを着用します.
    • <h1 class="mytitle"> 로그인 페이지 </h1>
  • 級ブランドを指す.
    • <style>
  .mytitle {}  → 클래스를 부를때 .명찰 {중괄호}
</style>

  • 領域を設定する場合は、背景色で領域を決定します.

  • テキストの位置合わせは中心です.
    test-align: center;

  • 画像を背景に配置する場合
    background-image:url(「リンクアドレス」);→タブで作成
    background-size: cover;
    background-position: center;

  • フィレット時
    border-radius: 10px;
    • ｣paddingとmarginの違い｣
    塗りつぶしは範囲内の余白です
    ✔申辺距は区域外距

    「100」ログインボタンを中央に移動する場合は、文章のプロパティを強制的にボックスに変換してから移動する必要があります.
    margin: auto;
    display: block;
    オーバーラップ
    class=「ラベル1ラベル2」と一緒に書くと、コードが重なって適用されます.
  • が1つしか書かれていない場合は、
    • と書きます.
    <button class="btn"> 명찰1 </button>
  • と2枚書いてあれば
    • です
    <button class="btn2 red-font"> 명찰2 </button>
    ▼▼実習
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인페이지</title>
    <style>
        .mytitle {
            background-color: green;
            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-size: cover;
            background-position: center;

            border-radius: 10px;

            padding-top: 20px;

        }

        .wrap {
            width: 300px;
            margin: auto;
        }
        .logbtn {
            width: 100px;
            margin: auto;
            display: block;

        }
        .red-font {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력하세요</h5>
        </div>
        <p> ID: <input type="text"/></p>
        <P> PW: <input type="text"/></P>
        <button class="logbtn red-font"> 로그인하기</button>
    </div>

</body>
</html>
    フォントの設定
    1.GoogleのWebページからリンクをコピー
    2.Head部分に貼り付ける
    3.style部分に*{CSSコピー}を貼り付ける
  • *{}は、すべてのコンテンツに適用されることを示す
    •     <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;300&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'IBM Plex Sans KR', sans-serif;
        }
    </style>
    【Android基礎編】SimpleAdapterのgetViewを書き換えボタンクリック応答を実現
    [白俊3114]りんごとバナナ