Card Reverse

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.18.에 작성된 글입니다.

---

VIEW

%단위와 top, left, bottom, right 그리고 축(axis)

요것들이 쉬워 보이지만 은근 짜증나게 한다.

그리고 container를 viewport의 중앙에 내릴때는 align-items: center;로 왜 안되는 걸까?..

의문이다.

거의 항상 position: absolute한다음 top과 transform: translateX로 중앙 배열하는 것 같다.

이번엔 margin-top으로 했다.

---

Link

CSS 3D

---

의문점 정리

1. margin-top: 50vh가 아니고 25vh써야 중앙에 정렬되는가?

Viewport Height (vh)는 viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다.

보통 넓이 개념에서 본다면 50vh라 하면 viewport의 반을 차지하겠지만,

margin-top에서 vh를 쓴다면 container의 맨 윗부분을 기준으로 반영된다.

그래서 25vh를 쓴다고 해서 중앙에 정렬되는 것이 아니라.

어쩌다 그렇게 보이는 것 뿐이다.

 

2. perspective에 대해서..

perspective는 원근법이라고 한다.

perspective뒤에 붙은 단위에 커짐에 따라 element가 화면으로(나로) 부터 멀어진다 보면 된다.

​

3. position: absolute

position: absolute는 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.

​