[CSS] Layer

참고> 당신이 모를 수 있는 7가지 about CSS (https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573)

주의> inline-block : 간격 문제가 발생함 -> float으로 변경

주의> float

- 더 이상 width == 100% 이 아니다.

- 부모테그가 자식테그를 인식하지 못함. (Float이므로) => height == 0 이됨

overflow: auto or hidden 명시해 주어야 부모테그가 정상적으로 인식함.

float 제거 역할 : 

clear: left;

clear: right;

clear: both;

https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8

가로 정렬 > 부모가 text-align 사용

세로 정렬 > 

[잘 안됨] vertical-align: middle <== 옆의 다른 테그를 기준으로 정렬할 때만 사용함.

[대부분 됨] IE에서만 문제 발생

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

}

.child {

  display: inline-block;

}

[HTML]

<div class="parent">

  <a class="child" href="#0">This is a button</a>

</div>

세로 정렬 > 

parent {

  background: yellow;

  height: 200px;

  width: 100%;

}

.child {

  vertical-align: middle;

  float: left;                 <== display: inline-block 대신 사용

  position: relative;

  top: 50%;                    <== parent의 중간

  transform: translateY(-50%); <== 자신의 중간

  background: skyblue;

}