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

10062 ワード
スパルタコードクラブ Web開発総合クラス CSS html テキストリンク

1.HTML親-子構造


HTMLタグで最も重要なのは「誰が誰の中にいるか」を理解することです.小包のラベルを変えると、中身も影響を受けます.

2.CSS基礎

  • headでスタイルで空間を作ります.
  • 装飾オブジェクトを指定して変更します.
    (例)クレヨンしんちゃんにズボンの色を変えろ!「クレヨンしんちゃんのズボン」

    3.常用CSSの練習


    [練習するもの]
    h1, h5, background-image, background-size, background-position
    color, width, height, border-radius, margin, padding
  • の余白は外縁、パッドは内縁
    • である.
  • の下にあるログイン画面を中央に配置するには、次の手順に従います.
    widthにmarify:autoを使います!まだだめなら、display:block
    • を追加
    <!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>코드를 입력하세요

    4.フォント、コメント、ファイルの分離


    1)Google Webフォントを使う


    住所:https://fonts.google.com/?subset=korean
  • select this styleを押して3番目のリンクをコピー
    titleラベルの下
    • にコピーして貼り付けます.
  • CSS rulesホームコンテンツのコピーを指定し、スタイルラベルで
    • を使用します.

    2）コメント

  • 注記不要なコードを削除するのではなく一時的に無効にする必要がある場合:
  • コードの簡単な説明
  • ショートカット:ctrl(またはcommand)+/(スラッシュ)

    • 3)CSSファイルを分離![]

  • スタイルラベルが長すぎて表示しにくいため、
    • に区切るファイルを作成します.
    <!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
    DI, IOC
    実験7:ProblemE:STL-括弧マッチング