21.07.05

先周勉强したページ、位置に関するCSSレイアウトを勉强しました.

学習内容

210705ラーニングコード

1. z-index

:z軸の高さに影響するプロパティ
3 Dプロパティを持つfixed、absoluteを兄弟関係のタグとして使用すると、レイヤがオーバーラップします.このとき、対応するレイヤを昇格させたい場合に使用します.z-index: 값(단위생략);▶基本属性値は0です.
▶z軸がある3 D属性値のみに適用

 fixed, absolute, relative

▶最初の兄弟の位置属性値が2 Dか3 Dか(純3 Dのfixedとabsolute)で積層が決まります.→ 큰 구역을 만들 때는 2차원을 주로 쓰자. 겹침 현상 때문▶レイアウトをもっと完璧にしたいなら、兄弟関係の位置関係によっても追加学習します.4 x 4=16の場合

2. float

:displayのinline blockではなく、選択した内容をx軸に並べて揃えます.

공간을 만드는 태그로 실습을 하였다.
-header main section footer div 등
이러한 요소들은 block 요소의 성격인 줄 바꿈 현상이 나타난다.

float: left/right;これは、選択した領域を空にして左側/右側に配置することを意味します.空中に浮かぶため、いくつかの3次元の特徴があります.clear: both;同じ線上にフローティングボックスを配置する機能を開く場合に使用します.この機能をオフにするには、パージを使用します.floatを前回使用したタグの次のタグに入れます.

ピンク、青、緑はfloat、黒はclear:両方使用;応用写真
ビジネスtip!개발자들이 html에서 float의 사용 유무를 빠르게 파악하기 위해 쓰는 관례 클래스명

<div class="clearfix"></div>

float을 마지막으로 쓴 태그 밑에 적어주면 쉽게 파악 가능하다.

※float注意点※

親サイズが固定値の空間ではfloatを使用します.これは、ブラウザの幅を増やしたり減らしたりしても、レイヤの形状を維持するためです.
▶珍しいですが、内側の領域幅値が可変値(明確な値ではなく%)、親は固定値である必要はありません.レイヤーが間違っていないので...
▶親のwidth値はfloat指定領域のwidth値の和以上でなければなりません.

floatを使用する領域の高さ値は親に影響しません.
▶位置と同じ現象.子どもが3次元であれば親の高さ値がなくても子どもは影響を受けません.

floatを使用する場合は、位置は静的で相対的でなければなりません.純粋な3 Dプロパティ値(fixed、absolute)はfloatと一緒に使用できません.現段階では,サードパーティメンバー間の面会が機能を相殺していると考えられる.

3. overflow

:写真などのすべてのオブジェクトを非表示にする場合に使用するcssプロパティ.overflow: hidden;:箱を出て隠れました.overflow-y: scroll;:y軸スクロール作成overflow-x: scroll;:x軸スクロール作成

overflow: hidden;書くときは写真のように隠す.
ビジネスtip!float를 가진 자식의 부모 태그에 overflow를 적용하면 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있다.

4. flex

display: flex;:floatの発展型.ソートするタグの親タグの内部に置く必要があります.基本的にx軸を揃え、左から並べ替えます.
属性と属性値を直感的に理解するサイト
flexbox.help

flex-direction 속성 : 진행 방향을 의미한다. 기본 속성값으로는 row가 있다.(때문에 굳이 설정하지 않아도 된다.)
이외 속성값은 column, row-reverse, column-reverse가 있다.

flex-wrap 속성 : nowrap이 기본 속성값.
안의 박스들이 부모영역을 벗어나지 않게 맞춰서 자동으로 리사이즈
속성값이 wrap일 경우 부모보다 자식들 영역의 width 합이 크면 자동 줄 바꿈. float에서 봤던 현상과 유사

flex-flow 속성 : direction과 wrap을 한 번에 지정한다.

justify-content 속성 : x축 기준 정렬작업, 기본 속성값인 왼쪽부터 정렬하는 flex-start가 있다. 다른 속성값으로는 오른쪽부터 정렬하는 flex-end, 정가운데 정렬 center, 안의 각 영역에 균일한 간격을 만들고 싶을 때 space-between, 각 영역 바깥쪽에 동일한 공간 생성하고 영역 사이 간격에도 공백을 만드는 space-around가 있다.

align-items 속성 : Y축(수직축) 기준 정렬, 속성값으로는  가장 윗쪽에 배치시킬 때 flex-start, 가장 밑에 배치하는 flex-end, 중앙 center, 박스들 간에 가장 밑의 라인에 맞춰 정렬하는 baseline이 있다.

5.中央揃え

:ビジネスで最も一般的なソート
視覚化サイトの一元化

margin: 0 auto;:最も簡単な方法.
0は上下、autoは左右自動整列
主にブロック要素に使用

結合位置の方法
位置:相対;書きます.
左に50%、左に50%移動します.瓦箱の割引で真ん中に着くことができます.サンプルコードのマージン-left:-150 px;書いてくれたしかし,空間サイズが変化するとmargin-left値も一緒に変化するという欠点がある.

困難な内容

週末に先週習った職位の内容を復習したが、今日はまた内容を加えて、混乱しているように聞こえた.また、flexコンセプトからの属性や属性値が多く、適用してもすぐには記憶されません.

解決策

復習だけが解決策らしい.親と子の間の位置を適用し直し、今日の授業で習った兄弟の間の位置を補充します.

に感銘を与える

実習の時に可視化の結果を見て行ったので、全く分かりませんでしたが、やはり位置概念が弱いと感じました.四角しか練習していないので、具体的な応用はなく、少しぼやけています.しかし、学んだことを復習し、他のサイトのコードを参考にして、勉強を続け、レイアウトを完全に把握すれば、どのような結果が得られますか?