[公費教育]Day 35
今日私はどのようにウェブサイトの基本的なフレームワークの配置を掌握することを学んで、いったん後で反応型に入って、文法はいくつか変化があって、しかし基礎を知っていて、やっと全体の配置を理解することができます.
まず、レイアウトの発展過程は大きく4つの段階に分かれている. table positioning span, div-float flex 初期の開発者は、テーブルを使用してレイアウトを整理しました.しかし、表は表を作成するために使用されるため、ダイナミックレイアウトは難しい.
したがって,要素の位置調整属性positionを用いたが,同様に限界があり,HTML 4の開始はdiv−float,spanである.
もちろん、この2つの方法はレイアウトには使用されませんが、divは要素のdisplay基本属性であり、処理が容易であるため、主にdivを使用してレイアウトを行い、要素間に一定の間隔を保つ場合はspanを使用します.
ただし、レイアウト専用構文flexの出現に伴っては使用されません.
ただ、まだ会社が使っているのでdiv、spanからレイアウトを知る必要があります.
display : block, inline div layout 作成 navigation bar 各要素には固有のdisplayプロパティがあります.
レイアウトを整理するには、まずそれを理解しなければなりません.
画面に表示するプロパティを決定すべての要素には、対応するプロパティがあります. プロパティの値は、block/inlineに大別されます. [例]
基本的には自分の属する行を独占する属性があります.
したがって、空間がどんなに大きくても、他の要素と同じ行に配置することはできません.(下)
制限:
制限ソリューション:1行に複数のfloatプロパティを入れることができます.
基本的には、自分の領域の内部データサイズのみを占有する属性があります.
空いているところがあれば、隣に他の要素が貼られています.(右)
≪制限｜Limit｜oem_src≫:「≪データ・サイズに等しい領域｜Area with Data Size｜oem_src≫」の属性を放棄しないため、幅の調整はできません.
ソリューション:そのため、spanにinline-blockというハイブリッド属性を加えると調整できます.しかし,レイアウトが定められていても,各要素の間には一定の空間が存在する.
これにより、要素の貼り付け方向が表示され、そのプロパティがわかります.
またspanはレイアウトには使用されず、主に要素が一定間隔で整列するために使用されます.
(重要なのは、div、spanにかかわらず、属性を変更すればよく、最も重要なのは属性の理解である)
ただし,
ただしレイアウトを構成する場合は、全仕様の100%は使用せず、divのwidth、heightを入力する必要があります.
ここでの問題は、複数のdivがある場合、divを使用する場合ではなく、各divのサイズを設定する必要がある場合、上のdivを作成し、そのdivのサイズを設定することです.
これにより、レイアウトの調整が小さい場合は、最上位divの幅を調整するだけでよい.
ただし、子孫divのサイズはpxではなく%に設定されます.
したがって,divを用いてレイアウトを行う場合は,まず大きなフレームワークを作る習慣を身につけたほうがよい.
横構造を構築するために,積水開発者は既存の属性を再解釈した.一言でHacky Code
しかし、これは水たまりの発生方法であり、それを使用するためにCSS Layoutを理解する必要がある.
HTMLドキュメントでは、設定をしない場合、ブラウザは独自のデフォルト値を使用してレイアウトを「通常ストリーム」と呼びます.
したがって、レイアウトに加えて、レイアウトは、最初にリストされたテーブル、位置、表示などの属性と要素を使用することもできます.
これらは正常な流れから分離されている.
同様に、横構造を実現するために、
私が作ったのです.
上図に示すように、上部はfloat、下部はnormal flowである.
実質的にfloatは透明であり,後方の通常流に投影した.したがって,float技術は単語の意味に従ってnormalflow上に元素を懸濁させる.
もちろん、それ自体の使い方は画像の横に文章を書くためです.
要するに,このfloatの特性はdisplau:blockの特性と結合し,横構造を実現できる.
①normal flowのdiv要素をfloat属性に昇格させます.
ただし、floatを使用すると、1行だけは使用されません.
しかし、元素が重なると横に押し出され、この原理を利用して横並びになる.
もちろん、
この場合、フレームワークは同じ問題を繰り返すため、通常の領域に配置されなければならない.
しかしフレームは浮動小数点数が上昇する要素を識別できないため,childを識別するために
もちろん、フレームワークのサイズをwidth、heightに設定すると、childは親の規格に従って空間を使用します.
ただし、スペースを超えると hidden:設定時に、正常なストリーム、floatのデータを計算することでchildを識別できます. overflow-x:hidden ; 、x軸のオーバーフロー部分を隠す
今日の最後の実習は「navigation bar」です.
最初にナビゲーションバーを作成するときに主に使用される要素は
①float:左シフト
②list-style:none削除フラグの設定
③
④ULのエッジは、パッドを外す→ナビゲーションエリアにうまく入る.
⑤liタグのテキストを中央に揃えてulに領域を割り当てる(%)
移動するホームページへのタグ接続
ㅇaはinline属性としてマークし、blockに変更してliのサイズに応じてサイズを調整する
◇アンカーの色と下線(色、文字-装飾)を取り除く
⑨行間を
⑪a:hoverにより、マウスのサスペンション時に設計を設定する
まず、レイアウトの発展過程は大きく4つの段階に分かれている.
したがって,要素の位置調整属性positionを用いたが,同様に限界があり,HTML 4の開始はdiv−float,spanである.
もちろん、この2つの方法はレイアウトには使用されませんが、divは要素のdisplay基本属性であり、処理が容易であるため、主にdivを使用してレイアウトを行い、要素間に一定の間隔を保つ場合はspanを使用します.
ただし、レイアウト専用構文flexの出現に伴っては使用されません.
ただ、まだ会社が使っているのでdiv、spanからレイアウトを知る必要があります.
📝目次
レイアウトを整理するには、まずそれを理解しなければなりません.
1.属性の表示
画面に表示するプロパティを決定
<span> ABC </span> : inline
<div> DEF </div> : block1) display : block
基本的には自分の属する行を独占する属性があります.
したがって、空間がどんなに大きくても、他の要素と同じ行に配置することはできません.(下)
制限:
width, heightを使用して幅を調整できますが、1行を占めるものは消えません.制限ソリューション:1行に複数のfloatプロパティを入れることができます.
2) display : inline
基本的には、自分の領域の内部データサイズのみを占有する属性があります.
空いているところがあれば、隣に他の要素が貼られています.(右)
≪制限｜Limit｜oem_src≫:「≪データ・サイズに等しい領域｜Area with Data Size｜oem_src≫」の属性を放棄しないため、幅の調整はできません.
ソリューション:そのため、spanにinline-blockというハイブリッド属性を加えると調整できます.しかし,レイアウトが定められていても,各要素の間には一定の空間が存在する.
またspanはレイアウトには使用されず、主に要素が一定間隔で整列するために使用されます.
(重要なのは、div、spanにかかわらず、属性を変更すればよく、最も重要なのは属性の理解である)
2. div layout
1）縦構造
divで縦構造を作るのは簡単です.ただし,
divを用いた場合,幅や高さを設けなければ,自分の上位要素を100%利用できることを指摘する必要がある.<body>
<div></div>
</body>
이 경우 div는 body의 모든 공간을 사용한다.ただしレイアウトを構成する場合は、全仕様の100%は使用せず、divのwidth、heightを入力する必要があります.
ここでの問題は、複数のdivがある場合、divを使用する場合ではなく、各divのサイズを設定する必要がある場合、上のdivを作成し、そのdivのサイズを設定することです.
これにより、レイアウトの調整が小さい場合は、最上位divの幅を調整するだけでよい.
ただし、子孫divのサイズはpxではなく%に設定されます.
したがって,divを用いてレイアウトを行う場合は,まず大きなフレームワークを作る習慣を身につけたほうがよい.
2）横構造
横構造を構築するために,積水開発者は既存の属性を再解釈した.一言でHacky Code
しかし、これは水たまりの発生方法であり、それを使用するためにCSS Layoutを理解する必要がある.
HTMLドキュメントでは、設定をしない場合、ブラウザは独自のデフォルト値を使用してレイアウトを「通常ストリーム」と呼びます.
したがって、レイアウトに加えて、レイアウトは、最初にリストされたテーブル、位置、表示などの属性と要素を使用することもできます.
これらは正常な流れから分離されている.
同様に、横構造を実現するために、
float度のnormalflowから要素を分離して配置する方法が用いられる. 私が作ったのです.
上図に示すように、上部はfloat、下部はnormal flowである.
実質的にfloatは透明であり,後方の通常流に投影した.したがって,float技術は単語の意味に従ってnormalflow上に元素を懸濁させる.
もちろん、それ自体の使い方は画像の横に文章を書くためです.
要するに,このfloatの特性はdisplau:blockの特性と結合し,横構造を実現できる.
（1）使用方法
①normal flowのdiv要素をfloat属性に昇格させます.
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
</div>
#box1{
float: left;
}
#box2{
float: left;
}
#box3{
float:left;
}(2)解説
display : blockプロパティの要素が通常のストリームにある場合は、行全体が使用されます.ただし、floatを使用すると、1行だけは使用されません.
しかし、元素が重なると横に押し出され、この原理を利用して横並びになる.
もちろん、
float:rightを行うと右側から順にリストされます.(3)オーバーフロー属性
parent 안의 내용이 넘칠 경우, 어떻게 할지에 대한 조치가 담긴 속성この場合、フレームワークは同じ問題を繰り返すため、通常の領域に配置されなければならない.
しかしフレームは浮動小数点数が上昇する要素を識別できないため,childを識別するために
overflow:hiddenを設定する必要がある.もちろん、フレームワークのサイズをwidth、heightに設定すると、childは親の規格に従って空間を使用します.
ただし、スペースを超えると
overflow:hiddenに設定されます.フローティング領域にあるため、親の同じ要素の領域を侵害します.#container{ overflow: hidden; }3.ナビゲーションバーの作成
今日の最後の実習は「navigation bar」です.
最初にナビゲーションバーを作成するときに主に使用される要素は
ulで、その内部はliです.<ul>
<li>1</li>
<li>2</li>
<li>1</li>
</ul>li列ごとに1行です.li要素は表示プロパティであることがわかります.次に、次の手順で縦方向のリストを横方向にリストします。
①float:左シフト
②list-style:none削除フラグの設定
③
overflow:hiddenで親であるULにLIを知ってもらう④ULのエッジは、パッドを外す→ナビゲーションエリアにうまく入る.
⑤liタグのテキストを中央に揃えてulに領域を割り当てる(%)
移動するホームページへのタグ接続
ㅇaはinline属性としてマークし、blockに変更してliのサイズに応じてサイズを調整する
◇アンカーの色と下線(色、文字-装飾)を取り除く
⑨行間を
line-heightにする⑪a:hoverにより、マウスのサスペンション時に設計を設定する
[成果物]
Reference
この問題について([公費教育]Day 35), 我々は、より多くの情報をここで見つけました https://velog.io/@ho_c/국비교육-Day-35テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol