학습한 내용

z-index
숫자만 입력
3차원적인 특징을 갖고 있는 포지션에서만 적용가능
큰 공간 큰 구역을 나눌때는 레이어 겹침현상 방지를 위해 2차원으로 세팅

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

float: left, right <왼쪽 또는 오른쪽으로 정렬>
같은 선상의 박스들을 배치하고자하는 기능을 킬 때
3차원적 특성을 일부 가지고 있음.

  사용할 때 주의점: 브라우저를 줄이고 늘일때 레이어 트러짐 현상 일어남.
                  float을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.
                  3차원 포지션과 사용할 수 없다.
  section 을 사용해 고정값을 가지고 있는 부모를 사용할것.
  
  

clear: both;
같은 선상의 박스들을 배치하고자하는 기능을 끌 때
공간을 만들때 사용되는 태그들을 block 요소의 성격 가지고 있음(y축 정렬)

overflow: hidden <영역을 벗어나는 것 안보여줌>
overflow-y: scroll <y축으로 내려서 보여줌>

display: flex; <자녀들 x축 왼쪽으로 정렬>

flex, justify, align 참조 사이트: flexbox.help
중앙정렬 참조 사이트: css center trick

학습내용 중 어려웠던 점

한가지 태그가 가지고 있는 속성이 많고 다른 것들과 같이 사용했을 때 기능들이 달라 경우의 수가 많다.

해결방법

참조 사이트를 통해서 눈에 익혀 둬야겠다.

학습소감

여전히 낯설게 느껴지는 부분이 많아 나중에 혼자서 배운것을 적용할 수 있을까라는 생각이 든다.