[CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기.

2021-03-18 처음에는 top: 50%의 값과 bottom: 50% 의 값이 서로 같은 영역을 차지할 거라고 생각하지만 막상 해당 옵션을 가지는 태그들을 비교해보면 그렇지 않다. 오늘은 그 이유를 알아보도록 하자. - 예제 아래는 예제 코드로써 부모 태그 안에 두 자식 / 들이 위치하고 있다. 이후 자식태그들에게 옵션값으로 top: 50% / bottom: 50% 값을 부여해주었다. 여기는 div 태그 두 번째 영역입니다. 여기는 div 태그 세 번째 영역입니다. 결과를 확인해보면 서로 다른 영역을 차지하고 있는 것을 확인할 수 있다. 여기서 의문점이 발생한다 똑같이 상단(top) or 하단(bottom)에서 시작하는데 막상 50%를 매개 값으로 주면 각 div 태그들이 차지하는 영역이 달라진다는 ..