🔎 HTML (5-2)

22103 ワード
テキストリンク

1.ブロックレベル要素


ブロック要素は独立したブロックであり、画面全体の幅を占める要素を指す.
行を変更するには、ブロック要素を使用します.
ブロック要素は、ブロック要素と行内要素を同時に含むことができます(私は混同しました).
代表的なブロック要素は<article>, <header>, <nav>, <section>, <div>

2.行内要素


行内要素とは、コンテンツ自体と同じサイズの領域を持つ要素です.
行内要素は、行内要素のみをネストできます.
行の要素の位置合わせは、テキストの位置合わせの影響を受けます.
代表的なインライン要素はspan、strongなどである.
<style>
        p {
            display: block;
            background-color: red;
        }
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <div class="one">
        <span>hello world</span>
        <span>hello world</span>
    </div>
</body>

ブロック要素VSライン内要素


[ブロック要素](Block Element)高さと幅の値を調整します.行の要素は高さと幅の値を調整します.
行の要素は高さと幅の値を調整できません👉 、の使用

display: inline-block


高さと幅の調整に使用
<style>
  p{
    display: block;
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
  }
  span{
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: teal;
  }
</style>
<body>
    <p>hello world</p>
    <span>hello world</span>
    <span>hello world</span>
</body>

😲 inline要素の問題


span boxの間に空間が発生した原因は?なぜならspanラベルの間のトルコは
<body>
    <p>hello world</p>
    <span>hello world</span><span>hello world</span>
</body>
しかし、この問題を解決するために、このような符号化は

👍 解決策

  • font-size: 0; 一部のブラウザでは
    • を食べません
  • enter(上記のコード=>悪い方法)
    • を削除します.
  • -余白を拡大します.フォントの種類が異なり、完全に適切ではありません(次の空白の問題)
  • float 
    • <style>
span{
    font-size: 1rem;
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: blue;
  }
  .one {
    font-size: 0; ✅✅✅
  }
</style>

<div class="one">
      <span>hello world</span>
      <span>hello world</span>
</div>

    エッジピッチが変化する問題(osによって異なる)
    フォントサイズに応じて余白を変更する問題
    <style>
.one {
	font-size: 0;
}
.two {
    display: inline;
    font-family: 'Rubik Wet Paint', cursive;
}
.three {
    line-height: 1;
    ✅✅ 1 == 16px
}
</style>

<body>
  <p>p</p>
 <div class="one">
  <span>span</span>
  <span>span</span>
 </div>


 <div class="three">
  <span class="two">H</span>ello
  <span class="two">H</span>ello
 </div>

</body>
    いい方法じゃない!!👉 と知る

    補足

    <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <!-- Toast Editor 2.0.0과 의존성 -->
    <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
    <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  </head>
  <body>
    <!-- 해당 예제는 bootstrap 시간에 했었습니다. -->
    <div id="editor"></div>
    <script>
        const Editor = toastui.Editor;
 
        const editor = new Editor({
            el: document.querySelector('#editor'),
            height: '600px',
            initialEditType: 'markdown',
            previewStyle: 'vertical'
        });
        
        // editor.getHTML()
        // editor.getMarkdown()
    </script>
  </body>
</html>
    div TAGなのでボタンを押すときにsubmit動作はできませんが、正常なsubmitでは?
    👉 input hiddenはこんな時に使います!!
    input hidden書き込み、inputにデータを入れます.入力はコミットされた機能をインポートするためにインポートされたと考えられます

    🙆🏻‍♀️ 振り返る


    最近疲れてきたので黒コンディションにしました~~
    [アルゴリズム]最小拡張ツリー(MST)
    commons-codecのいくつかの応用