開発ログ初日

18316 ワード

1.学習内容

箱型(箱型)
すべてのHTML要素はボックス状です.HTML要素はmargin、border、padding、contentで区切られています.

content:テキストまたは画像を含むボックスの実質的な内容部分
padding:コンテンツと枠線の間隔
border:コンテンツとpaddingの枠線を囲む
margin:borderと隣接要素との間隔

index.html

<div class="box-model">Hello World</div>

style.css

.box-model {
	/*내가 만든 공간의 크기를 유지한 상태에서 padding으로 위치를 변경할 경우*/
	box-sizing: border-box;
	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;
	/*top right bottom left 순*/
	/*코드가 길어질 수록 브라우저의 속도 느려진다.*/
	/*margin: 100px 0 0 100px;*/
	padding: 100px 0 0 100px;
	/*
	margin-left: 100px;
	margin-top: 100px;
	margin-right:;
	margin-bottom:;
	padding-left: 100px;
	padding-top: 100px;
	padding-right: ;
	padding-bottom: ;
	*/
}

結果

利益合併
marginはcssプロパティで、要素の4つの方向外の空白領域を設定します.この場合、利益連結とは、隣接するブロック要素の上下エッジが連結される現象を指す.marginのサイズは、マージされたmarginの大きな値を持つmarginの値にマージされます.
エッジマージ現象は2つに分けられます.

兄弟合併現象
index.html

<div class="margin-one"></div>
<div class="margin-two"></div>

style.css

.margin-one {
    width: 100%;
    height: 100px;
    background-color: yellow;
    margin-bottom: 100px; 
}
.margin-two {
    width: 100%;
    height: 100px;
    background-color: blue;
    margin-top: 150px;
}

-結果

親子の合併
index.html

<div class="margin-parent">
    <div class="margin-child"></div>
</div>

style.css

.margin-parent {
    width: 300px;
    height: 300px;
    background-color: yellow;
}
.margin-child {
    width: 150px;
    height: 150px;
    background-color: blue;
    margin-top: 100px;
}

-結果

Display
displayプロパティは、要素を表示する方法を決定します.
主に4つの属性値があり、各ラベルのデフォルト値は異なります.
none:非表示
ブロック:ブロックボックス
インライン:インラインボックスインラインボックス
inline-block:blockとinlineの中間形式
inlineプロパティ値は上下配置操作も空間作成もできません.
逆に、blockプロパティ値を使用すると、上下に操作を配置し、スペースを作成できます.
inline-blockプロパティ値には、2つのプロパティが含まれています.
index.html

<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

style.css

h1 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 100px;
}
span {
    display: block;
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 100px;
}

Vertical Align
CSSでinlineとinline-blockを垂直に揃えます.
属性値
top:親要素の上部を整列
middle:中央の親要素
bottom:親要素の下部に調整する

index.html

<span class="inline">Inline</span>
<span class="inline-block">Inline-Block</span>
<img src="https://via.placeholder.com/200">

style.css

.inline-block {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-color: yellow;
}
/* img 태크는 inline-block요소를 가지고 있기 때문에 사용가능*/
.inline, .inline-block, img {
	vertical-align: middle;
}

結果

Position
TAGERの位置を決めるCSS要素です.positionを使用するときに注意しなければならないのは、次の点です.

margine-top使用時、親子間で発生する利益合併現象は

である.

top、right、bottom、leftプロパティが使用可能かどうか

子供の身長値が親に影響するかどうか

static:positionのdefault値で、親と子の間の利益連結現象が発生します.top、right、bottom、leftは使用できません.
固定:麻疹合併は発生しない.top、right、bottom、leftを使用できます.(単一座標基点ブラウザベース)親に高さ値がない場合、子の高さ値は親の高さ値に影響しません.
関連:親子の間に利益合併現象が発生した.top、right、bottom、leftを使用できます.(座標は初期位置のみで形成されます.)親に高さ値がない場合、子供の高さ値は親の高さ値に影響します.
絶対:麻疹合併は発生しません.top、right、bottom、leftを使用できます.(単一座標基点ブラウザベース)親に高さ値がない場合、子の高さ値は親の高さ値に影響しません.
static
index.html

<div class="static-parent">
	<div class="static-child"></div>
</div>

style.css

.static-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}
.static-child {
	position: static;
	width: 150px;
	height: 150px;
	background-color: blue;
	/*margin-top: 100px;*/
	/*top: 100px;*/
}

fixed
index.html

<div class="box1"></div>
	<div class="fixed-parent">
		<div class="fixed-child">
    </div>
</div>
<div class="box2"></div>

style.css

.fixed-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;	
}
.fixed-child {
	position: fixed;
	width: 100px;
	height: 100px;
	background-color: blue;
	margin-top: 100px;
	/*margin-top: 100px;*/
	/*top: 100px;*/
}
.box2 {
	width: 300px;
	height: 2000px;
	background-color: green;
}

relative
index.html

<div class="box1"></div>
	<div class="relative-parent">
		<div class="relative-child">
    </div>
</div>

style.css

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}
.relative-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;	
}
.relative-child {
	position: relative;
	width: 100px;
	height: 100px;
	background-color: blue;
	/*margin-top: 100px;*/
	/*top: 100px;*/
}

absolute
index.html

<div class="box1"></div>
	<div class="absolute-parent">
		<div class="absolute-child">
    </div>
</div>

style.css

.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}
.absolute-parent {
	position: static;
	width: 300px;
	height: 300px;
	background-color: yellow;	
}
.absolute-child {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: blue;
}

2.学習内容の難点または未解決の問題

用語自体の理解が不十分であるため、空白と充填を区別することは困難である.

の位置の次元と各属性値を理解するのは難しい.

3.ソリューションの作成

marginとpaddingの区切り画像で理解できる.
positionの理解は慣れるまで繰り返し勉強しています.

4.勉強の心得

空間の理解が最も重要なようで,暗記用語と属性値を繰り返し学習すべきである.

Reference

この問題について(開発ログ初日), 我々は、より多くの情報をここで見つけました https://velog.io/@hijaekyeoung/개발일지-1일차

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

白駿1152単語(Python)

アカデミー28日目-Java