July, 5 #layout (2)

z-index:z軸に影響するプロパティ
(1:33:42 - 1:45:15)
1)

html)
<div class="z-one"></div>
<div class="z-two"></div>

css)
.z-one {width:200px;
        height: 200px;
        background-color: yellow;}
.z-two {width:200px;
        height: 200px;
        background-color: blute;}

.z-one {width:200px;
	**position:  absolute;width:200px;**  << 추가하면
        height: 200px;
        background-color: yellow;}

青い箱は見えません.消えたのではなく、積み重ねられています.
(ハイライトされた値を表示するために高さ値を調整できます)
2)

.z-one {
	position:  absolute;width:200px;

        height: 200px;
        background-color: yellow;
    }
.z-two {
	position:  absolute; << 이번엔 파란색에 absolute 추가
	width:200px;
    height: 200px;
    background-color: blue;
    }

青い箱の後ろに黄色い箱が重ねられた状態
->兄弟関係のabsoluteが3 D特性を持つ位置の属性値absoluteまたはpixedを使用すると、レイヤが重なります.
1)で黄色の位置をドラッグする場合はz-index
属性値は数値を適用するだけで、数値の単位は無視されます.

ex)
.z-one {
	position:  absolute;width:200px;

        height: 200px;
        background-color: yellow;
        z-index: 10; <<<<< 이렇게
    }

z-ndexは最初は0だったのを覚えています.0と10より10の方が高いです.
黄色が上向き.

.z-one {
	position:  absolute;
	    width:200px;

        height: 200px;
        background-color: yellow;
        z-index: 10;
    }
.z-two {
	position:  absolute;
	width:200px;
    height: 200px;
    background-color: blue;
    
    z-index: 20;} <<< 10과 20중 20이 더 높기 때문에 블루가 위쪾으로 올라옴

z-indexでz軸位置を自由に調整できます
**使用時の注意点)z-indexはz軸上にあります.=3 Dフィーチャー

すなわち,z軸上の3次元領域のみで利用可能である.

=3 Dフィーチャーの位置プロパティの値にのみ適用されます。

3 Dフィーチャーの位置

absolute、pixed、relative(2.3次元プロパティ)

position-staticは2次元で、最初はz軸の概念がなかった->z-indexは使用できません
2)兄弟値の位置属性値による結果の表示方法

.z-one {
	    width:200px;

        height: 400px;
        background-color: yellow;
        /*z-index: 10;*/
    }
.z-two {
	position: absolute;
	width:200px;
    height: 300px;
    background-color: blue;
    
    /*z-index: 20;*/
}

:最初の兄弟に純3 D位置属性値(純3 D:absolute,pixed)を追加
使用時に積層し、次の層では絶対位置を使用します.
積層現象は発生しません.
つまり、最初の兄弟の位置が2次元か3次元かによって、
layerが重なるかどうかを決定し、大きな空間を作成する際に主に2 Dを使用します.
(これは、大空間の両側が三次元の場合、積層現象が発生するためです)
@ bootstrap agency
フローティングとクリア
Float:選択領域をx軸に並べて位置合わせ/ブラウザの左端、右端に特定のオブジェクトを配置するときに使用するcssプロパティ

<div class="left-1"></div>
<div class="right-1"></div>
</body>
</html>

.left-1{
 width: 100px;
 height: 150px;
 background-color: blue;
}

.right-1 {
	width: 100px;
	height: 150px;
	background-color: green;
}

両方のアトリビュートは2 D blockアトリビュートなので、y軸で位置合わせして確認します

.left-1{
	float: left; <<< 추가
 width: 100px;
 height: 150px;
 background-color: blue;
}

.right-1 {
	float: right; <<< 추가
	width: 100px;
	height: 150px;
	background-color: green;
}

ブラウザのサイズを減らしたり、両端を揃えたりします.これらのレイアウト構造を作成するときに使用されるのはfloatです.
floatを使用して従来のレイアウト構造を作成!

※スペース作成時に使用するラベルはblock要素
floatを使用する場合、clearはフォローします(clear:tweat;)
float:同じ回線のブロックを配置したい場合
float注意点:レイヤが歪んでいる可能性があります.
静的または相対的(純粋な3 Dのみ)を使用する必要があります.
ヒント:

floatを使用する親値は非固定にできません->レイヤワープ防止

の3 Dプロパティ:floatを使用する子の高さ値は、親の高さ値

に影響しません.

の位置は次のとおりです. 静的または相対的 使うべきです.純粋な3 D位置はfloatと一緒に使用できません.

clear

:floatを閉じる
前回使用したタグの真下にfloatを書く必要があります
both:左右どちらもオフにします

overflow

コンテンツ(テキスト、要素など)が要素の大きさを超えている場合、要素内で使用するオプション
オーバーフローオーバーフロー:要素を超えた部分の処理
visible:オーバーフローした部分が表示されます.default
hidden:オーバーフロー部分を切除する
overflow-y:スクロールスクロール:y軸でスクロール
overflow-x:volold:x軸でスクロール

flex

親ラベルの複数のサブラベルをソートするdisplayプロパティ
floatよりも少ない制約により、Webサイトのレイアウトで効率性が向上
親エレメントに表示:flexを使用すると、サブエレメントはx軸で左揃えになります.

<div class="container">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>
.container {
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: baseline;
    width: 1000px;
    border: solid 10px red;
    height: 500px;
}
.item {
    width: 200px;
    height: 300px;
}
.one {
    background-color: yellow;
    height: 100px;
}
.two {
    background-color: blue;
    height: 200px;
}
.three {
    background-color: orange;
    height: 300px;
    /* width: 900px; */
}

用法

flex-方向揃えの変更:row(default,x軸揃え)、colum-reverse(y軸揃え)、row-reverse(x軸右揃え)、colume-reverse(y軸下揃え)

flex-wrapサブエレメントの幅を調整するかどうか:nowrap(親領域のサブサイズ)、wrap(幅を超えた場合に自動的に改行)

flex-flow:flex-direction,flex-wrap一度指定

videf-content x軸整列:flex-start(左揃え、デフォルト)、flex-end、center、space-twon(オブジェクト間スペース)、space-boond(先頭と末尾ともにスペース)

align-items y軸整列:flex-start(上部整列)、flex-end、center、baseline(最大高さ要素で整列)

<div class="container">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>
.container {
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: baseline;
    width: 1000px;
    border: solid 10px red;
    height: 500px;
}
.item {
    width: 200px;
    height: 300px;
}
.one {
    background-color: yellow;
    height: 100px;
}
.two {
    background-color: blue;
    height: 200px;
}
.three {
    background-color: orange;
    height: 300px;
    /* width: 900px; */
}

集中的にソートする方法

margin: 0 auto
(上下エッジ、左右エッジ)ブロック要素は

を用いる.

.   center-1 {
    width: 300px;
    height: 300px;
    background-color: yellow;
    margin: 0 auto;}

position: relative, left:50%, margin-left:-1/2 width

.   center-2 {
    position: relative;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background-color: blue;
}

注)https://css-tricks.com/centering-in-css/

position: relative, left:50%, margin-left:-1/2 width

    .center-2 {
    position: relative;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background-color: blue;
}

html, body {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
    margin: 0;
    padding:0;
}
a {
    color: #000000;
    text-decoration: none;
}

.menu li {
    float: left;
    width: 100px;
    height: 50px;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
}

.menu li {
    float: left;
    width: 100px;
    height: 50px;
    background-color: yellow;
    /* border: solid 1px red; */
    border-top: solid 1px red;
    border-bottom: solid 1px red;
    border-left: solid 1px red;
}
.menu li:last-child {
    border-right: solid 1px red;

.kakao-lists li .kakao-info {
    display: inline-block;
}
.kakao-lists li img, 
.kakao-lists li .kakao-info {
    vertical-align: middle;
}

July, 5

これは7月の第2月曜日です.2次元3次元の様々な状況の数を正確に把握し,それを円滑に進めるために,様々な実務を振り返っている.徐々に蓄積された記録が増えてきていますが、具体的な構造やデザインを考えて、うまく書けるかどうか見るべきだと思います.