🎊学習の内容

z-index: 10 
/* z축 위치 조절, 높으면 위로, 3차원만 사용가능*/

float: left; /* 같은 선상 레이아웃 배치 */
float: right;
clear: both; /* 다음 영역에 지정 필수, html 코드를 파악하는데 용이하기 위해 div class="clearfix" 따로 사용*/
/* float 부모 영역은 자식의 합친 값 보다 크거나 커야함, 레이어가 틀어지는 현상을 방지.
float 영역이 가변값을 가지고 있으면 굳이 부모가 고정값일 필요가 없음. 이런경우는 드물다
float 부모의 영역은 자식의 합친 값보다 크거나 커야함, 레이어가 틀어지는 현상을 방지
float 영역은 높이값이 부모에게 영향을 안끼침
fixed, absolute는 float 사용 불가능*/

overflow: hidden; /*  float 결합해서 사용하면 자식의 높이값을 부모가 인식하게 만들 수 있음 */
overflow-x: scroll;
overflow-y: scroll;

display: flex; /* float 발전된 개념, 부모에 삽입하면 자식들 x축 정렬 */
flex-direction: row; /* x축 */
flex-direction: column; /* y축 */
flex-direction: column-reverse; /* y축 역순 */
flex-direction: row-reverse; /* x축 역순 */
flex-wrap: nowrap; /* 부모영역을 벗어나지 않고 부모영역에 맞게 리사이징 */
flex-wrap: wrap; /* 부모영역보다 자식의 영역이 크면 자동으로 줄바꿈 */
flex-flow: row wrap;  /* direction, wrap 한번에 지정 */
justify-content: flex-start; /* x축 정렬 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* 사이 공백 */
justify-content: space-around; /* 좌우 사이 공백 */
align-items: flex-start; /* y축 정렬 */
align-items: flex-end;
align-items: center;
align-items: baceline;   

margin: 0 auto; /* 마진에 2개를 입력하면 앞에 0은 상하 auto 좌우 */

/* width 수정하면 margin-left 수정 */
.center-2 {
	position: relative;

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

	left: 50%;
	margin-left: -150px;
}

学習内容の難点

🎁解決策

🎉学習の心得.