📒 Z-index

📌 z-index : 숫자속성값;

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


css ✍

.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;}

✔ 형제관계에 3차원 속성값을 가진 absolute, fixed, relative를 사용할 경우 layer가 겹치는 현상이 발생한다.

✔ z축의 영향을 미치는 속성(z축의 위치조정)속성값으로는 숫자만 입력 가능하고 단위 생략이 가능하다.

✔ z-index 를 적용하기 전 상태는 o 이고, 0 < 10 10이 더 높기 때문에 yellow가 위로 올라온다.

✔ z축이 있다 라는 것은 3차원 특징을 갖고 있는 position 속성값에서만 가능하다.

✔ static은 2차원이라서 z축이라는 개념이 존재하지 않아 사용할수 없다.

✔ 순수 3차원 포지션 속성값을 사용하면 layer가 겹치게되고, 첫번째 형제 포지션에 따라 2차원인지, 3차원 인지 layer가 겹칠지 안겹칠지 결정된다.

💡 큰 공간을 만들 때 2차원(static, relative)사용
작은공간 3차원, 2차원 그때그때 다름(3차원으로만 만들면 layer겹침현상 발생)

📒 Float

📌 float: left; float: right;, float: center;

특정 오브제를 왼쪽 끝 또는 오른쪽 끝으로 배치하고자 할때 사용하는 css속성

✔ display inline-block 사용하지 않고 내가 선택한 영역을 x축으로 나란히 정열,선택된 영역을 공중에 띄워 3차원적 특징을 일부 갖게할 수 있다.

✔ 공간을 만들때 사용하는 태그(header, main, section, footer, div 등 )로
y축 정렬이 가능하다.
(블록요소의 성격을 띄기 때문에 줄바꿈 현상이 일어나면서 y축으로바뀜)

📌clear: both;

clear: both;

clear은 기능을 끄고자 할때 사용하는 속성
clear를 사용할때는 float을 마지막으로 사용하는 태그 마지막에 사용하기
float left right 양쪽기능을 모두 끄겠다.

html ✍

<header></header>

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

css ✍

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

.left {
	float: left;

	width: 100px;
	height: 200px;
	background-color: pink; }

.center {
	float: left;

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

.right {
	float: right;

	width: 100px;
	height: 200px;
	background-color: green; }

footer {
	clear: both;

    
	width: 100%;
	height: 100px;
	background-color: black; }

💡 float을 사용하면 같은 선상 배치 작업 가능하고
float을 사용할때는 clear가 꼭 같이 사용해주기

🚫 float사용시 주의점

1. 고정값을 갖고있는 float안에서 layer배치작업을 할때 부모가 고정값을 가지고 있어야하고 부모의 width값은 float을 가지고 있는 layer의 값보다 크거나 같아야한다.

2. float을 사용한 영역은 그 영역의 높이값(자식의 값)이 부모에게 영향을 주지 않는다.

3.float을 사용할때는 relative,static 만 사용해야함
(순수3차원 positinon 속성값(absolute,fixed)은 사용못한다.

📌 실무Tip

css에서 clear와 clear both를 사용했을경우 html에서는 어느부분에 적용했는지 모를수가 있기때문에

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

	 <footer></footer>
     
 ✍ css
 .left-2 {
	float: left;

	width: 100px;
	height: 150px;
	background-color: yellow; }


.right-2 {
	float: right;

	width: 100px;
	height: 150px;
	background-color: blue; }

footer {
	width: 100%;
	height: 100px;
	background-color: black; }

.clearfix { 
	clear: both; }
    
    float 마지막 사용한 부분이 right-2 부분이고, 
    그 다음 태그에 clear both값을 
    적용해줌으로써 div clear fix 부분에서는 
    float기능이 꺼지고 footer안에서 공간이 만들어진다.

📒 Over flow

📌 특정 공간에서 벗어나 속성값을 보여줄때 사용하는 태그
속성값으로 hidden을 사용하면 감춰준다.

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 </p>
		</div>


css ✍
.over-box {
	overflow: hidden;
	영역을 벗어난 오브젝트를 정리 해주는 태그
	overflow-y: scroll;
	벗어난 내용을 y축기준으로 알고싶을때
	overflow-x: scroll;
	x축을 기준으로 벗어난 내용을 알고싶을때
	width: 200px;
	height: 200px;
	background-color: yellow;
}

📌 float과 overflow히든과 함께 사용할 수 있다

html✍

<section>
	 💡 floot을 사용한 영역을 부모(section)로 감싸줌 부모는 
     	    고정값으로 width를 가지고있음
	 <div class="left-2"></div>
	 <div class="right-2"></div>
</section>

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

 ```

✔ clearfix를 사용해서 어떤지점에서 float 사용됐고 중단됐는지 알수있다.

css✍
	section {
	💡 overflow: hidden;

	width: 800px;
	background-color: orange; }

✔ overflow hidden값을 사용해서 자식의 높이값이 부모에게 영향을 줄수있도록 만들수 있다.

✔ 부모고정값 자식이 3차원이라서 부모의 높이에 영향을주지못함 단, 자식을 flot으로 갖고있는 부모영역에 💡 overflow hidden을 사용하면 높이값을 인식하게 된다

✔ over flow와 flot을 결합해서 사용하면 자식의 높이값을 부모가 인식할수있도록 만들수 있다

📒 Flex

📌 효과적으로 레이아웃 배치작업을 도와주는 CSS 속성 (flot에서 발전된 기능)

css ✍
.container {
	display: flex;
	✔ display는 html의 성격을바꿀때 사용되는 속성
	  inline-block / bolck-inline*/
	✔ 부모영역에 flex를 지정하면 왼쪽부터 진행

	✔ x축으로 정렬
	flex-direction: row;
    
	✔ y축정렬 
	flex-direction: column; 
    
	(row-reverse = 역순으로 오른쪽부터 정렬 
    	column reverse역순으로 y축으로 정렬)
        
	width: 1000px;
	border: solid 10px red; }

📌 flex-wrap: nowrap;

nowrap은 기본값

부모영역을 벗어나지않고 안에있는 박스들을 자동으로 resize시켜준다

flex-wrap: wrap;

flex-flow: row wrap;

justify-content: flex-start;

justify-content: flex-end;

justify-content: flex-center;

justify-content: sapce-between;

justify-content: sapce-around;

align-items: flex-start;

align-items: flex-endt;

align-items: flex-center;

align-items: baseline; 

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