HTML & CSS

27017 ワード
JavaScript TIL テキストリンク

Webを整理するために、HTML、CSS、JavaScriptの3種類があります。


注目点を分離するには、構造、スタイル、インタラクションを分けてコードを記述する必要があります。


HTML


HTMLは、ウェブ構造(Structure)を担当するタグ言語である.
htmlは不等号で囲まれたHTMLの基本コンポーネントです.
ツリー構造を表します.
<html>
  <head>
    <title>Hello HTML & CSS & JavaScript</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <div>
      <span>HTML Start!!!</span>
    </div>
  </body>
</html>
上のコードを見ると、各ラベルには<tag></tag>の形があり、ラベルの内部には内容があります.
以下のラベルは、ラベル内部に内容がない場合に<tag />と表現することができる.
<img src="image/image01.png"></img>
<img src="image/image01.png" /> // 생략이 가능하다
各ラベルにはattribute(プロパティ)を含めることができます.
<tag attribute="value"> </tag>
<tag attribute="value" />
HTML属性(attribute)は2つの部分から構成されています.
  • 属性name:属性の名前
  • 属性値:属性値
    • 属性の名前と値を明確に区別する必要があります.

    divラベルとspanラベルの比較


    div:タグごとに1行を占めます.
    span:各タグが占有する空間はコンテンツの大きさと同じです.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="index01.css" />
  </head>
  <body>
    <div id="div1">div 태그는 한줄을 차지 합니다</div>
    <div id="div2">이것은 또 다른 div 태그입니다</div>
    <span id="span1">span 태그는 컨텐츠의 크기만큼만 공간을 차지합니다</span>
    <span id="span2">이것은 또 다른 span 태그입니다</span>
    <span id="span3">이것 또한 또 다른 span 태그입니다</span>
    <span id="span4">저도 span 태그에요!</span>
    <div id="div3">저는 무슨 태그일까요?</div>
    <script src="index01.js"></script>
  </body>
</html>
    次の図は、上記のコードで、ラベルごとにどれだけのスペースを消費するかを決定するためにスタイルを適用した結果です.

    DeveloperコンソールでHTMLの構造を表示することもできます.

    imgラベル


    img挿入について説明します.
    <img src="image/" />
    src=" "この部分は属性です.key = "value"に記入すればいいです.
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>img 삽입</title>
  </head>
  <body>
    <h1>아래에는 너무 귀여운 사모예드들이 있어요! :)</h1>
    <img src="image/samoyed.jpg" width="400px" />
  </body>
</html>

    タブ

    <a>要素はアンカーポイントの略で、HTMLドキュメントに他のページに接続されたハイパーリンクを表示するために使用され、主にhrefプロパティに使用されます.
    上記のimgタグ部分を説明するために作成されたhtmlファイルにaリンクを追加します.
    <a href="https://www.google.com/search?q=%EB%A6%AC%ED%8A%B8%EB%A6%AC%EB%B2%84&rlz=1C5CHFA_enKR942KR942&sxsrf=ALeKk03btlf9eq9Xgi441duCNR-SgkJwXg:1614907357031&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjknvHa_pfvAhXKad4KHQihDKgQ_AUoAXoECAoQAw&biw=1680&bih=1306" target="blank">너무나도 사랑스러운 리트리버들 보러가기!</a>

    aタグのtargetプロパティは、既存のページに直接リンクされます.target="blank"のプロパティが付与されている場合は、現在表示されているページを保持し、新しいウィンドウを開いて移動できます.
    ハイパーリンクハイパーリンク:すべてのフォーマットの資料、参照、リンクリングをハイパーテキストドキュメントに直接リンクします.

    ul, ol, li

  • ul: unordered list
  • ol: ordered list
  • li: list
    • ulの表示
    <html>
...
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>
      Item 3
      <ul>
        <li>detail Item 1</li>
        <li>detail Item 2</li>
        <li>detail Item 3</li>
        <li>detail Item 4</li>
        <li>detail Item 5</li>
      </ul>
    </li>
    </ul>
</body>
</html>

    ol概要
    <html>
...
<body>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>
      Item 3
      <ol>
        <li>detail Item 1</li>
        <li>detail Item 2</li>
        <li>detail Item 3</li>
        <li>detail Item 4</li>
        <li>detail Item 5</li>
      </ol>
    </li>
  </ol>
</body>
</html>

    input type


    input,textarea:各種入力フォーム
    inputラベルは、タイプによってinputを使用できます.
  • type=「text」を与えると、よく見られる内容を入力するボックスが一般的に表示されます.
  • type=「password」と入力すると、入力したパスワードが**表として表示されます.

    • CSS


    要素を視覚化するスタイルシート言語を設計します.
    htmlドキュメントで作成した構造にid、classでスタイルを適用できます.
    CSSはデザインだけじゃない!
    1.適切な場所にコンテンツを配置する(レイアウト)
    2.強調テキストのような最低限のレイアウト
    3.最小限のアクセス性を提供可能(色などで区別可能)

    Box Model


    box modelには、コンテンツ、塗りつぶし、枠線、余白があります.

    box-sizing: border-box


    border-boxは、width、heightsをborderにborder、paddingの値を設定すると、その内容が徐々にドリルされる構造です.

    box-sizing: content-box


    contentサイズを基準にpadding,border,marginを外側に与え,範囲を外側に拡大した.

    idとclassの違い


    idclass#を選択します.選択した宛先に基づいて自由に名前を付けることができ、宛先に基づいて自由に名前を付けることができます.ドキュメントには1つの要素だけが一意の値を持ち、同じ値を持つ要素が多く、1つの値しかない複数の要素が複数の値を持つ特定の要素を命名するために使用されます.スタイルの分類に使用

    その他のスタイリング

  • 太さ:font-weight
  • 下線、横線:text-装飾
  • 文字間隔:アルファベット間隔
  • 行:line-heigth
    • Linux、Windows、Macの3つのシステムでBoostライブラリをコンパイル
    LinuxですべてのNIC情報を取得