Naver Boostキャンプとカンヌ学院の授業を整理します.HTMLやCSSで見逃しがちなポイントを復習し、SCSSや関連アニメーションなどの拡張機能を学びます.

レイアウト

Display

要素の既定の表示値は、ブロックレベル、行内レベルなどのレンダーボックスのタイプを決定します.
その他のプロパティ値にはlist-item、flex、inline-flex、table、table-cellなどがあります.

inline

block

inline-block:レンダリング(配置)はinline level要素ですが、block levelの性質があります.
*heightやwidthなどのボックスモデル属性を適用できます.
*inlineとinline-blockの場合、タグの間にスペースや書き換えがある場合は、約4 pxの余白があります.

displayとboxモデルの関係

displaywightmarginpaddingborderblock
実際、inline要素のpadding/borderは左/右、上/下にも適用されますが、上/下padding/borderはline-boxに影響しないため、親要素のボックスには反映されません.

Visibility

要素が表示される属性を指定します.実際のレンダーはに変わり、視覚的に非表示になります.
display:none:要素をレンダリングしない(DOMには存在しない)
Visibility:hidden:要素は表示されませんが、レンダリングされ、画面にスペースがあります(DOMに存在します)

表示:

画面表示

hidden:表示しない(スペースを占める)

クラッシュ:セル間の境界を無視および非表示(表要素のみ)

Float & Clear

floatプロパティは、通常のストリームではなく、要素を独立した空間の上に配置します.周囲のテキストまたは行の要素が囲まれているのが特徴です.floatを使用すると、周囲の要素をより自然に配置できますが、フローティングされていない周囲の要素にも影響します.そのため、よりよく理解し、使用する必要があります.ほとんどの要素の表示値を블록に変更します.(表示値変更異常:inline-table、flexなど)

none:フローティングしない

左:左側

にフローティング

right:右フロー

フローティング要素は、周囲の要素の配置にも影響します.そのため、周囲の要素が意外に現れることがあり、子要素は親要素よりも大きく、侵害の形で現れることがあります.主にafter仮想セレクタとclear、overflowプロパティを使用してこの問題を解決します.

float属性が適用された要素の親要素に対して가상요소 ::afterを使用してclearを実行

nav::after { 
	content: ''; 
	dispaly: table/block; 
	clear: both 
}```

overflow: hiddenまたはoverflow: autoを

floatを有する要素の親要素に適用する
オーバーフロー:autoを使用すると、子の幅が親の幅より大きい場合、水平スクロールバーが表示されます.
オーバーフロー:hiddenの場合、オーバーフローした部分は切断されるので使用しないほうがいいです.

Position

要素のレイアウトを設定することで、要素の位置を必要な位置に移動できます.positionを使用するには、要素を移動するための座標属性offsetも理解する必要があります.
位置効果は静的なNormal-flowで配置され、offset値は適用されません.(デフォルト)絶対親要素の位置に対してoffsetで配置します.親ノードに位置値(静的を除く)がある場合は、オフセット値の開始点になります.正常な流れからずれる.固定ビューポート(ブラウザのウィンドウ)に対してoffsetで配置します.すなわち、画面スクロールにかかわらず、情報は常に画面の指定された位置に表示される.親の地位の影響を受けない.自身が位置する位置に対してoffsetに従って配置します.親の位置属性の影響を受けません.Normal-flowの流れに従います.周囲要因に影響を及ぼさずoffset値に移動します.
*親の位置値がstaticの場合、absoluteは親の位置値に基づいて、親の位置値がstaticでないまで使用します.

Offset

top | bottom | left | right: auto | length, % | initial | inherit;

paddingとmarginに%値を適用すると、上下左右方向を考慮せずに水平寸法に基づいて%値が計算されます.
ただし、オフセット量は、要素の左、右(左、右)、幅の値に基づいて計算されます.

Z-index

要素のオーバーラップ順序(쌓임 순서またはstack order)を指定する属性.レイアウト構成では、それらを考慮して配置してください.
position値がstatic値でない場合は指定できます.順序値がない場合は생성순서(코드상 순서)でスタックします.
親にz-index値がある場合は、親にのみ意味があり、大きな値が一番上にあります.(使用可能な負の値)

Q&A

Q.浮動小数点が親の身長に合わない問題をどう解決するか.

A.divを空白コンテンツ("")のclear: bothに適用し、親別名をフローティングすることによってクリアすることができる.(必要content)

Q.2457712ユニットのz軸方向の位置を変えることができますか?translateと使い方は?

A.X、Y軸のみ変更可能で、absoluteを使用して親要素でレイヤソートできます.したがって、要素の幅と高さ、オフセット量、translateを使用して中央揃えを行うことができます.

Q.2457912は新しいブロックを生成しますか?

A.overflowプロパティは、コンテンツのサイズがコンテンツの指定された領域を超えたときにコンテンツを処理します.領域を超えたコンテンツは、「表示」、「非表示」、「スクロール」または「自動」(viewportのdefault)として指定して処理できます.