HTMLデフォルト


HTMLとは?


は、寸法言語で記述されたWebブラウザに表示されるcontent의 구조, 짜임を定義した文書である.

HTMLの設定

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    
    <title>JS Bin</title>
  </head>
  
  <body>
    <!-- comment --> 
    <!-- implementaion --> 
  </body>
</html>
HTMLドキュメントには、基本的に上記の形式があります.

説明


📌 <!DOCTYPE html>


コードの最初の<!DOCTYPE html>を使用して、現在合成されているドキュメント(doc)がHTMLタイプであることを宣言します.

📌 <head>


ユーザーが表示するUI要素ではなく、現在のHTMLドキュメントのmeta情報をマークします.
符号化utf-8、適用するスタイルシート、適用するスクリプト、ラベルに表示されるtitleなどを決定することができる.

📌 <body>


ユーザーが見たUIに関するものを表す場所.

💎 クリーンアップ用語


メタデータ情報の他、通常열린 tagcontent닫힌 태그の構成で欲しい情報を表現します.
  • 開いているタグ
    これは,Webドキュメントにおいて展開領域を区切る役割を果たすか,あるいは後のコンテンツがリンクのような機能を果たすことを意味する.<a>のように、<tagName>の形式でラベル署名を<>にマークすればよい.
    📣 属性(attribute)
    これは、既存定義のタグを詳細に設定できることを意味します.
  • tagのスタイル(フォントサイズ、色、画像幅、高さ)
  • を変更
  • 指定idにより独立に切断
  • クラスを処理して汎用属性などを付与する.
  • Content
    Webドキュメントに表示したいテキスト情報を表します.
    開いたタグを使用すると、スタイルをtag定義に変更したり、ドキュメント上の配置領域区切りに変更したりできます.
  • 閉じたタグ
    これは、対応するオープンタグの最後の場所を適用することを意味します.
  • <!-- 상응되는 tag 만난 경우 --> 
    <div class="my-header"> My Content </div>
    
    <!-- 옳지 못한 tag가 입력된 경우 -->
    <div class="my-header"> My Content </a> 

    プライマリ・ラベル


    tagには2つの基準が分類できる.
  • BoxとItem
    Boxタグ
    CSSがなくてユーザーには見えず、
    Tagに囲まれたコンテンツは、Webページのどの位置にありますか.
    ゾーン分割ロールの実行
    Itemタグ
    リンクやプレーヤーなどのタグ機能を実行して、ユーザー
  • に表示します.
  • BlockとInline
    Block Level
    親Tagに対するすべての横線を占有するTag.

    Inline Level
    親Tagと1行のTagを共有し、次のTagが親Tagの水平長を超えない場合

  • Semantic Tagとは?


    Tagの名前だけでTagのキャラクター、おおよその位置などの意味を伝えるTag.

    なぜSemantic Tagを使うのですか?


    HTMLファイルが非意味タグ<div>および<span>のみで構成されていると仮定します.
    このHTMLファイルを開いて修正する場合、<header><nav>のようなラベルがないため、各コードの意味を1つずつチェックする必要がある.
    もちろん、classでは同じ意味と機能を持つタグを表現できますが、新しいページを作成するたびに、重複する意味と機能を表現するためにclassを定義するのに不要な時間がかかります.従って、semantic tagを用いて可読性と生産性の両方を捉える限り、再実現する必要はない.

    Semantic tagで表示されたページLayout



    有用なサイトの集合

  • MDNのhtml要素参照
    TagおよびAttributeでは、必要な機能を満たすTagまたはAttributeがあるかどうかを確認し、サポートされているブラウザのタイプとバージョンを確認できます.
  • Validator
    正常に入力されていないhtmlドキュメントであるかどうかを確認できます.
  • リファレンス

  • EllyYoutubeでHTML関連の動画
  • https://www.youtube.com/watch?v=i0FN-OwJ7QI
  • https://www.youtube.com/watch?v=OoA70D2TE0A