ネットワーク開発総合クラス第1週

10399 ワード
テキストリンク

ログインページの作成(機能実装x)


Web開発のベースHTML、CSSを少し味わってみました.
  • HTML:領域とテキストを表すコード(スケルトン)
  • CSS:デコレーション
    • 👉 いくつかのよく使われるcssコード(すべて知っているはずがなくて、検索して使うことができます)
    背景関連
    background-color
    background-image
    background-size
    サイズ
    width
    height
    フォント
    font-size
    font-weight
    font-family
    color
    間隔
    マージンマージン:アウトマージンの周期アウトマージンのしゅうき
    padding:私の内側の空白周期
    ????????????????????????????????????????????????????
    <!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 {
            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;
        }
    </style>
</head>

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

</html>
    💻 結果

    [ログイン中]画面を中央にインポートするには?!
    bodyのコードはすべてdivで包まれ、wrapというクラス名を与えます.
    スタイルには、次のコードのようにマージンを調整します.
    それもだめなら?display:blockを追加!
      .wrap {
        margin: 10px auto;
        width: 300px;
    }
    💻 結果

    書体を塗る


    Google Webフォント
  • 好きなフォントを選択し、「Embed」タブをクリックします.
  • linkはheadの間にコピーして、cssはstyleの間にコピーして終わりました!
    • <!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    /* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}
    TIL
    MVC Music Storeオンライン音楽ショップ例分析(4)Artist,Cart,Genre,MusicStoreEntities