HTML

42512 ワード
テキストリンク

1) HTML Tags


✔学習目標


1.HTMLタグを理解し、使用します.

📎 HTMLタグの種類


ラベルはその意味で使用する必要があります.
  • リンク
  • 画像
  • リスト
  • タイトル

  • 常用アンカーマーク、imgマーク、ul/liマーク、headingマーク、pマークなど.

  • また、最もよく使われるdivラベルもあります.

  • divラベルはblock elmentと呼ばれ,一般領域を表す際に最も多く用いられる.(仮想領域)

  • すべてのタグを覚える必要はありません.重要なのは、必要なタグを見つけて適切なタグを使用することです.

    • 👀 実習コード

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <h1>반갑습니다</h1>
    여기 여러분들이 좋아하는 과일이 있어요.
    <ul>
      <li><a href="http://www.apple.com">사과</a></li>
      <li>사과</li>
      <li>메론</li>
      <li>귤</li>
    </ul>
  </div>
</body>
</html>

    💡 使用するコード


    div, h1, ul, li, a, href

    参考資料


    様々なHTMLタグのサイトを表示
    2)HTML Layoutタグ

    ✔学習目標


    1.レイアウト(ページ構成全体)の適切なHTMLタグを理解します.

    🔍 レイアウトラベル

  • header
  • section
  • nav
  • footer
  • aside

    HTML5 layout tag

    • 👀 実習コード

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>사이트야</title>
</head>
<body>
<div>
  <header>header</header>
  <div id="container">
  <nav> <ul>
    <li>home</li>
  <li>news</li>
  <li>sports</li>
  </ul></nav>
<aside><ul>
  <li>로그아웃</li>
  <li>오늘의 날씨</li>
  <li>운세</li>
</ul></aside>
    </div>
  <footer>footer</footer>
  
</body>
</html>

    💡 使用するコード


    header, footer, nav, aside, id

    3)HTML構造設計


    ✔学習目標


    1.CSSなしでHTML構造を設計する.

    📎 HTML構造設計


    構造化設計はドキュメントを書くように簡単です.
    現在の業界では、プレゼンテーション形式の企画書や設計ファイルを受け取り、HTMLの開発を開始します.
    何を見ても、それができます.
    その画面を見て構造を分析します.
    まず、領域を上部/本文/ナビゲーションに分割し、大きな部分から開始します.
    通常、各領域においてコンテンツの構造が決定される.
    各分野の内容にも様々な形式がある.
    リスト、画像、または段落を表示できます.
    その度に適当なラベルを書けばいいです.
    また、エリア内に他のエリアがある場合は、徐々に内部に縮小し、HTMLタグを使用して完了します.
    開発段階では、CSSコードを一緒に実装するのではなく、HTMLでドキュメントの構造を決定します.
    このようにしてこそ、骨格全体が丈夫になります.

    👀 実習コード

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
  <h1>Company Name</h1>
  <img src="..." alt="logo">
  </header>
  
    <div>  <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul></nav>
    
    <div>  
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </div>
    <div>
      <ul>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </div>
  </div>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>
    例の知識...意味のない字を埋めるためによく使われる文です.

    4)classとid属性


    ✔学習目標


    1.CLASSとIDの目的を理解して区別できる.

    🔍 ID

  • は唯一の属性であり、1つのHTMLドキュメントでは1つしか使用できません.
  • 固有のID値があれば、IDごとに特殊な制御が可能であり、検索も容易である.

    • 🔍 Class

  • は、1つのHTMLドキュメントで
    • を繰り返し使用することができる.
  • ラベルには、複数の異なるクラス名をスペース単位でリストできます.
  • ページの全体的なスタイルを一致させるためには、classを使用する必要があります.
    • このように区別できますが、多くの会社では開発段階で自分のルールを使うための約束をしています.
    例えば、IDの使用が禁止されている場所.
    classの場所としてのみ使用されます.
    それはチームがどのように決めたかによって決まります.

    👀 実習コード

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
  <h1>Company Name</h1>
  <img src="..." alt="logo">
  </header>
  
  <section id="nav-section">
    <nav><ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul>
    </nav>
    
    <section id="roll-section">
      <button></button>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <div><img src="dd" alt=""></div>
      <button></button>
    </section>
    <section>
      <ul>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
        </li>
        <li class="our_diescriptipn">
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
        </li>
      </ul>
    </section>
  </section>
  <footer>
    <span>Copyright @codesquad</span>
  </footer>
</body>
</html>
    杭電1003 Max Sum(dp)
    nodeコアモジュールを認識する--EventEmitterに深く入り込む