GIT

과거로 돌아가기

=> git log에 있는 id값으로 checkout한다

CSS

box-model

• inline
  => width와 height의 값을 줄 수 없다
  => 컨텐츠의 크기에 맞게 너비가 조절된다
• inline-block
  => 줄바꿈이 생기지 않는다
• block
  => 기본적으로 부모 요소의 너비 전체를 채운다
  => 줄바꿈이 생긴다

  • block, inline-block 요소에서 부모 요소의 너비를 주고 자식 요소에 % 너비를 주면 기기 너비에 맞게 조절된다

flex

레이아웃을 위한 배치기법

• 부모 요소에 display: flex;
  => item은 block의 성격으로 렌더링된다
• flex-direction
  => item이 정렬될 방향을 지정
• justify-content
  => 아이템들을 정렬하는 방법
• flex-wrap
  => wrap 값을 주면 item들이 줄바꿈을 하게 된다

flex-item

• order값을 줘서 item의 정렬순서를 바꿀 수 있다
  => order는 몸무게처럼 숫자가 클 수록 시작점에서 먼쪽부터 정렬된다
  => 같은 무게일 땐 마크업 순서가 뒤인 것이 먼쪽으로 간다
• flex-basis
  => 아이템의 초기 크기를 지정
  => width와 다르게 고정값을 가진다

  • auto;
    => 컨텐츠 크기만큼 크기를 가진다
  • 0;
    => 나머지 item을 배치하고 남은 크기를 가진다

• flex-grow
  값을 준 남는 영역의 비율만큼 남는 영역을 가진다
• flex-shrink
  줄이는 거

grid

• display: grid;
  => 부모 영역에 준다
• gird-template-columns(rows)
  => 비율로 구역을 나눈다
• grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝;
  => 요소가 차지할 구역을 정한다

gap

flex와 grid에서 요소 사이의 간격을 설정한다

BOX

여백

• 컨텐츠 요소의 크기만큼의 너비를 가지는 block요소에 padding값을 줘서 크기를 키울 수 있다

positioning

• fixed
  => absolute와 달리 띄운 다음 뷰포트를 기준으로 움직인다

transform

• transform: translateX(Y)(값)
  => X축(Y축)으로 값만큼 이동한다