크기

가장 흔하게 쓰는 px 부터, %, viewport, (r)em 등 다양한 단위가 있다.

px: 1 픽셀
%: 부모 요소 대비 비율
viewport: 화면 전체 크기(viewport)의 10% 비율 단위
em: 해당 요소의 font-size 대비 상대적 비율
rem: 문서의 root의 font-size 대비 상대적 비율

크기 연산

calc를 통해 여러 단위를 혼용해서 사용할 수 있다. 예시는 다음과 같다.

/* Viewport Height Size = 1080px */
calc(100vh - 192px); /* ==> 1080px - 192px = 888px */

Margin, Padding

마진과 패딩 모두 한개씩 개별로 지정할 수 있다. 기준은 시계방향. 한 개만 값을 입력하면 모든 방면, 두 개 입력하면 각 각 세로, 가로, 네 개 입력하면 시계방향 각각 적용된다. 세 개도 할 수 있긴한데... 하지 말자. 또는 -[direction] 을 붙여서 지정할수도 있다.

margin: 1px 2px 3px 4px;
margin-top: 10px;

Flex

Display의 또 다른 속성이다. 잘만 사용한다면 이만큼 편한게 없다. 세로 중앙 정렬은 물론, 순서 변경 등 다양한 기능을 지원한다.
모든걸 기억하고 있으면 좋겠지만, 너무 속성이 많아 기억이 안나면 찾아보면서 하면 된다.
자세한 내용은 https://studiomeal.com/archives/197 여기서 찾아보자.

몇가지 속성만 살펴보자면

flex-direction: 배치 방향
justify-content: 방향 정렬 (메인축)
align-items: 세로 정렬
...

이 있다.