開発ログ2日目

13664 ワード
テキストリンク

1.学習内容

  • z-index
    -positionプロパティを使用して、要素を重ねて配置します.エレメントの垂直位置をz-indexプロパティに設定できます.数字が高ければ高いほど、前に並んで、小さくなって、後ろに並んでいます.この場合、positionプロパティで3 Dプロパティに対応するabsolute、fixed、relativeを使用すると、要素が重なります.staticの場合、2 Dプロパティなので、要素は重複しません.
    • index.html
    <!-- z-index -->
<div class="z-one"></div>
<div class="z-two"></div>
    style.css
    /*absolute, fixed를 사용하게 되면 레이어가 겹치는 현상이 발생함*/
.z-one {
	position: absolute;
	width: 200px;
	height: 400px;
	background-color: yellow;
	z-index: 20;
}
.z-two {
	position: absolute;
	width: 200px;
	height: 300px;
	background-color: blue;
	z-index: 10;
}
  • 結果

    元の位置がabsoluteであれば、後ろの要素が優先的に現れるはずですが、z-indexの数字が高い前の要素はまず前に置かれます.
  • z-indexは存在しません
  • float
    floatはレイアウトを位置決めする際に使用される機能です.同じ線上にレイヤーを配置できます.
    • index.html
    <div class="left-1"></div>
<div class="right-1"></div>
    style.css
    /* float */
.left-1 {
	float: left;
	width: 100px;
	height: 150px;
	background-color: blue;
}
.right-1 {
	float: right;
	width: 100px;
	height: 150px;
	background-color: green;
}
    -結果
  • floatを使用する場合の注意点
  • floatを使用すると、レイヤがねじれます.したがって、常に固定値の空間内で使用する必要があります.
  • floatを使用し、同じ線上にレイヤーを配置しない場合は、floatのタグを終了した後にclear:tothが必要です.floatを閉じる必要があります.
  • は純粋な3 Dの位置に属します:絶対、固定して使用する時浮動小数点を適用しません.
    index.html
    • <header></header>
<section>
	<div class="left"></div>
	<div class="center"></div>
 <div class="right"></div>
</section>
<footer></footer>
    style.css
    /* float */
header {
	width: 100%;
	height: 100px;
	background-color: yellow;
}
.left {
	float: left;
	width: 300px;
	height: 200px;
	background-color: pink;
}
.center {
	float: left;
	width: 500px;
	height: 200px;
	background-color: blue;
}
.right {
	position: absolute;
	float: right;
	width: 300px;
	height: 200px;
	background-color: green;
}
footer {
	clear: both;
	width: 100%;
	height: 100px;
	background-color: black;
}
section {
	width: 1400px;
	height: 200px;
	background-color: orange;
}
    -結果

    -overflow
    箱の中の内容が多すぎて、箱の範囲を超えたときにどのように表示するかを指定します.
    -visible : 기본값, 컨텐츠가 넘칠경우 박스 밖으로 벗어난다.
-hidden : 넘치는 부분은 잘려서 보여지지 않는다.
-scroll : 스크롤바가 추가되어 스크롤을 할 수 있다.
-auto : 컨텐츠양에 따라 스크롤바가 추가될 지 자동으로 선택된다.
    Hiddenに対して
    index.html
    <div class="over-box">
	<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>
	</div>
    style.css
    .over-box {
	overflow: hidden;
	width: 200px;
	height: 200px;
	background-color: yellow;
}

    -flex
    flex領域に指定された親の子供は、自動的にx軸でソートされます.
    display:flex는 부모의 자식들을 x축으로 정렬시킨다.
flex-wrap: nowrap은 부모 크기에 맞춰 자동으로 리사이즈시켜준다.
flex-direction: row(x축), column(y축),row-reverse(역순 x축), column-reverse(역순 y축)

justify-content(x축): flex-start(왼쪽부터 정렬),flex-end(오른쪽),center(중앙),space-between(3개의 영역의 균일한 간격),space-around(박스바깥쪽의 동일한 간격)
align-items(y축) : flex-start(가장 위쪽에 배치),flex-end(가장 아래쪽),center, baseline(박스가장 밑 부분 기준으로 정렬)
    index.html
    <!-- flex -->
	 <div class="container">
	 	<div class="item one"></div>
	 	<div class="item two"></div>
	 	<div class="item three"></div>
	 </div>
    style.css
    .container {
	display: flex;
	/*flex-direction: row;*/
	flex-wrap: nowrap;
	width: 1000px;
	border: solid 10px red;
}
.item {
	width: 200px;	
}
.one {
	height: 100px;
	background-color: yellow;
}
.two {
	height: 200px;
	background-color: blue;
}
.three {
	width: 900px;
	height: 300px;
	background-color: orange;
}
    参考資料)https://flexbox.help/
    -中央揃え
    中央揃え
    index.html
    <div class="center-1"></div>
<div class="center-2"></div>
    style.css
    /*중앙정렬 1번째 방법*/
/*margin: 상하 좌우*/
/*margin: 0 auto*/
.center-1 {
	width: 300px;
	height: 300px;
	background-color: yellow;
	margin: 0 auto;
}
/*중앙정렬 2번째 방법*/
/*left: 50% 왼쪽면 기준으로 50%*/
/*단점은 width 크기에 따라 margin-left의 크기도 바꿔줘야한다.*/
.center-2 {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: blue;
	left: 50%;
	margin-left: -150px;
}
    -結果

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


    floatを使用する場合、コードを直接書くことで結果を確認してこそ、理解しやすい点に注意してください.単純な暗記は学習にはならないようだ.
    flexが親の子供をx軸で並べ替えるのは理解できますが、並べ替えの属性にはまだ慣れていません.

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


    floatであれば、学習したコードを書き直し、結果を確認し、問題を解決することができます.
    flexならflexboxhelpで理解しています.

    4.勉強の心得


    学習に役立つサイトを参考にしたり、使用したりして問題を解決することができ、学習に役立つようです.
    大学連合アルゴリズムウィンター学院第5回(累計,ダブルポインタ)
    Base 64符号化の概要