CSS: Essentials

box-sizing

기본값 content-box는 padding, border, margin을 제외하고 오직 content-box의 width, height가 적용된다.
border-box는 content, padding, border 까지가 width, height가 된다.

position

기본값 static에서 top, left는 적용되지가 않는다.
relative는 원래 있던 공간은 유지하면서 그 공간에서 상대적으로 top, left 값 만큼 옮겨간다.
absolute는 원래 있던 공간에서 빠져나와서 가장 가까운, static이 아닌 부모를 기준으로 옮겨간다.
sticky는 static한 상태를 유지하다가, 스크롤이 되면서 지정한 top, left에 고정된다.
fixed는 원래 있던 자리를 완전히 빠져나와서 뷰포트 내에서 위치가 정해져서 고정된다.

alignment

1. margin: auto
2. text-align: center (inline)
3. translate은 요소의 크기를 기준으로 하기 때문에 박스 안 요소의 크기가 50%일 경우에 translate(50%,50%)을 쓰면 중앙정렬 되고, 요소의 크기가 다를 경우 아래처럼 하면 된다.

        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

4. text의 경우 수직중앙 정렬 : line-height를 부모 박스 크기만큼 준다.

background

background-image: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;

background: center/cover no-repeat url();

animation-timing-function

ease-in-out, linear, step, cubic-bezier...
https://cubic-bezier.com/

CSS Variable

root에서 정의하는 편. calc()함수와 같이 쓸 수도 있고, 미디어 쿼리 적용할 때 :root안의 정의된 값을 바꿔주면 편하다.

:root {
  --main-color: white;
}
div {
  background-color: var(--main-color);
}