학습내용

• z-index

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

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


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

z-one, z-two div를 만들고 width, height값을 주면 위와 같이 출력이 된다.

z-index 속성을 주면 위와 같이 파란색(z-two)가 없어진 것 처럼 보이지만 실제로는 노란색(z-one)뒤에 배치가 되어 있다. 크기가 같기 때문에 레이어가 겹쳐지면서 안보이게 된다.
z-index : z축에 영향을 미치는 속성
z축을 자유롭게 위치를 조정할 수 있다.
z-index가 적용되지 않은 영역은 값이 0인 상태이다.
속성값으로는 숫자만 작성하고 단위는 생략한다.
10과 20을 비교하면 20이 더 크기 때문에 blue가 위로 올라온다.
그렇기 때문에 3차원적 특징을 가진 position에서만 사용이 가능하다(fixed, absolute, relative).

첫번째 형제에게 순수 3차원 position (fixed, absoulte)를 사용하게 되면
레이어가 겹치고 (2차원이면 안 겹침)
두번째 형제에게 position을 사용하게 되면 겹치지 않는다.
큰 섹션을 만들 때는 2차원을 사용한다. 겹치는 일이 없음.
--> 첫번째 형제의 position이 2차원인지 3차원인지에 따라 레이어가 안 겹치거나 겹치게 된다.

• float

 <header></header>
 	<section>
	<div class="left"></div>
 	<div class="center"></div>
 	<div class="right"></div>
 	</section>
 <footer></footer>

header	{
	width: 100%;
	height: 100px;
	background-color: gray;
}

.left {
	float: left;

	width: 300px;
	height: 200px;
	background-color: coral;
}

.center {
	float: left;
	width: 300px;
	height: 200px;
	background-color: green;
}

.right {
	position: fixed;
	float: right;
	width: 300px;
	height: 200px;
	background-color: yellowgreen;
}

footer {
	clear: both;

	width: 100%;
	height: 100px;
	background-color: orange;
}
section {  
	width: 1400px;
	height: 200px;
	background-color: black;
}

공간을 만드는 태그들 (div, footer, section 등)은 Block의 성격(y축정렬)
float : 공중으로 띄운다. 띄어서 겹치게 하고 정렬, 같은 선상으로 배치,일종의 3차원적인 특성을 가지게 함
z-index와 비슷하게 앞에 형제가 3차원이면 뒤에 형제가 뒤로 가서 겹쳐진다.

float와 clear은 한 세트라고 보면 되는데
같은 선상에 배치하려는 기능을 on - float
기능을 off - clear (float를 마지막으로 사용한 태그의 다음 태그에 clear)

float를 사용할 때는 float 속성을 사용한 태그의 부모의 크기가 고정이 되어 있어야한다. 가변성이 있으면 안됨 (레이어의 틀어짐 방지를 위해), float를 지정한 구역이 %이면 굳이 부모의 크기가 고정되어 있을 필요가 없다. 고정된 width안에서 float정렬이 되었기 때문에 레이어 틀어짐 현상이 없다. float를 지정한 값들의 부모는 float들의 width값보다 크거나 같아야한다. 순수 3차원 position에서는 float 사용 불가

<section>
	<div class="left-2"></div>
	<div class="right-2"></div>
 </section>
	<div class="clearfix"></div>

<footer></footer>

.left-2 {
	float: left;
	width: 100px;
	height: 150px;
	background-color: seagreen;
}

.right-2 {
	float: right;
	width: 100px;
	height: 150px;
	background-color: gray;
}

footer {

	width: 100%;
	height: 100px;
	background-color: black;
}
.clearfix {
	clear: both;
}
section {
	overflow: hidden; 
	width: 800px;
	background-color: orange;
}

html코드만 봤을 때는 어느 지점에서 float와 clear이 되었는지 확인하기 힘들다.
관례적으로 float가 있는 마지막 태그 다음에 class="clearfix"를 지정해준 후
.clearfix {both;}값을 넣어주면 clearfix만 보고도 유추가 가능하다.

div가 3차원이기 때문에 자식의 높이를 부모가 받지 못하는데 overflow: hidden; 를 사용하면 자식의 높이값을 받을 수 있다.

<div class="over-box">
	<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet you Nice to meet you</p>
</div>

.over-box {
	overflow: hidden;
	overflow-y: scroll;
	overflow-x: scroll;
	width: 200px;
	height: 200px;
	background-color: yellowgreen;
}

overflow: hidden; - 선택한 구역보다 텍스트 수가 많을 때 선택한 구역에서만 텍스트를 보고 싶을 때
overflow-y: scroll; - y축으로 스크롤 생성해서 텍스트 안 잘리게 할 때
overflow-x: scroll; - x축으로 스크롤 생성해서 텍스트 안 잘리게 할 때

overflow + float = 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있다.(3차원이여도 인식할 수 있게 해준다라는 뜻)

• flex - 효과적으로 웹사이트 레이아웃 작업을 하도록 도와주는,
  float의 발전된 형태
  ~~ 부모영역에 flex를 적용~~하게 되면 왼쪽을 기준으로 x축 정렬
  

<div class="container">
	<div class="item one"></div>
	<div class="item two"></div>
	<div class="item three"></div>

</div>

• class를 두개 사용해서 하나는 크기, 하나는 서로 다른 css를 적용하고자 할 때 이런 식으로 활용 가능↓

.container {
	display: flex;
	/*flex-direction: row; row가 기본,x축정렬, column-y축정렬, row-reverse 역순으로 오른쪽정렬, column-reverse 역순으로 y축 정렬*/
	/*flex-wrap: wrap; */
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline ;

	width: 1000px;
	height: 500px;
	border: solid 10px lightcoral;

}

.item {
	width: 200px;
	
}

.one {
	height:100px ;
	background-color: yellowgreen;
}

.two {
	height: 200px;
	background-color: lightblue;
}

.three {
	/*width: 900px;*/
	height: 300px;
	background-color: orange;
}

flex-wrap: nowrap; - 부모의영역을 벗어나지 않고 안에 있는 영역이 자동으로 부모영역에 맞춰서 리사이징 시켜줌
flex-wrap: wrap; - 부모보다 자식들의 합이 크면 자동으로 줄바꿈
flex-flow: row wrap; - flex와 wrap을 동시 지정할 때

justify-content: flex-start; - x축 정렬을 작업할 때, flex-end; 오른쪽정렬
center; 가운데 정렬, space-between; 간격만들고싶을때 ,space-around 박스 바깥에 동일한 공백

align-items: flex-start ; - y축 정렬 가장 위쪽 배치, flex-end 가장 밑, center 중앙,
baseline ; 박스들끼리의 밑 라인을 맞춰 정렬

• 중앙으로 정렬하고자 할 때

	<div class="center-1"></div>
	<div class="center-2"></div>

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


}

.center-2 { 
	position: relative;
	width:300px;
	height: 300px ;
	background-color: gray;
	
	left: 50%; /*왼쪽면을 기준으로 50%*/
	margin-left: -150px; /*회색박스의 50%만큼 당기*/


}

margin: 0 auto; - 상하 0, 좌우 auto, block 요소에서 사용

.center-2는 position: relative;를 지정하고 (top, right,bottom,left사용가능)left: 50%;, margin-left: -150px; 주어서 정렬,
-단점 : width의 값이 바뀌면 margin-left값도 바꿔야하는 두번 수정해야하는 번거로움이 있음

어려웠던점

오늘은 position의 뒤를 이어 헷갈림의 양대산맥을 배운 기분이다
float가 여전히 헷갈린다.

해결방법

개발일지 작성 후 한번 더 들어야겠다.
이번에는 영상만 보는 것에 집중 해야겠다.

• 참조 사이트
  https://flexbox.help/
  https://css-tricks.com/centering-in-css/

학습소감

깃허브 사용법을 주말동안 익혔다. 여전히 로컬에서 바로 업로드(?)하는건 모르겠지만 add files를 해서 추가하면 되는 것이였다. 이제 실습파일들을 깃허브로 옮겨서 보관해야겠다. float 너무 어렵다. float 수업 하면서 position얘기도 나오니 머리가 빙빙 돈다. 다시 들으러 가야겠다.