CSS - Position, Transform, Animation 요소

• Sticky vs Fixed
  position: Sticky;
  스크롤 하게 되면, content안에서 고정이 된다.

position: Fixed;
부모요소와 상관 없이 기존의 문서에서 나와 viewport의 내용에 의해 결정이 된다.

• 수직이나 수평정렬
  margin: auto;
  div는 하나에 한 줄을 정렬 가능하다. 자동적으로 중간 정렬이 된다.

text-align: center;
블럭 레벨은 적용되지 않는다. margin auto를 사용해야 한다.

• 중간정렬 하는 방법
  transform: translate(50%, 50%); 중간으로 오게 된다.

• text를 중간 정렬 하기 = 주로 한 줄의 text일때
  text-align: center;
  line-height: 부모 요소만큼 값을 주기;

• transform : position, top, left와 함께 사용해야 한다.
  position: center;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  translate(50%, 50%); -값으로 좌표계처럼 사용이 가능하다.
  position값을 준 다음에 부모 요소의 50%로 이동을 한다.

• background-image: url요소를 넣는다.
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; (남은 공간 여백을 차지하면서 반응형 이미지 처럼 된다.)
  background: repeat left; 반복되는 이미지가 나타난다.

• Transform
  transform: translate(100px, -30px); x와 y의 값을 지정한다.
  transform: scale(1.2); 1.2배 크기가 커진다.
  transform: rotate(30deg); 30도 회전을 한다.

• box:hover {
  background-color: red;
  transition-property: background-color;
  transition-duration: 300ms;
  transition-timing-function: linear;

  transition: background-color 300mx linear; 이렇게 3개의 코드를 한번에 작성하는 방법을 주로 사용한다.

  // background-color가 animation처럼 변경이 된다.

• box:hover {
  border-radius: 50%;
  transition: all 300ms ease;

  // 원형으로 변형이 된다.
  https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
  mdn에서 확인도 가능하다.

• transition 옵션 설정할 수 있는 사이트
  https://cubic-bezier.com/#.17,.67,.83,.67