1.CSS 내용 정리

block 과 inline이란

• inline은 한줄에 여러개나오고 크기는 입력값의 크기에 따라 달라짐. width나 height를 줘도 나타나지 않고 글자의 크기 만큼만 나오게 된다.
• block은 한줄에 하나만 나오는 것. width나 height를 입력하면 그에 따라 크기가 변한다.
• inline-block은 블럭 단위로 들어가지만 한줄에 여러개가 들어간다.

Posotion

• relative : 원래 있어야 하는 자리에서 옮겨간 것.
• absolute : 내가 담겨있는 상자안에서 움직인 것.
• fixed : 상자에서 완전히 벗어나서 페이지 상에서 옮겨가는 것
• sticky : 원래 있어야 하는 자리에 있으면서 스크롤링 해도 남아있는 것.

Flex Box

• flex하기 전에는 블럭 레벨로 다른 요소들이 같은 줄에 들어올 수 없다.
• flex를 하게 되면 row라는 default값으로 한줄에 여러 요소들이 들어오게 된다.
• row 수평
  • flex-direction : row(default값) : 왼쪽에서 오른쪽으로 정렬
  • flex-direction : row-reverse : 오른쪽에서 왼쪽으로 정렬
• column 수직
  • flex-direction : column : 위에서 아래쪽으로 정렬
  • flex-direction : column-reverse : 아래쪽에서 위로 정렬
• wrap
  • flex-wrap : nowrap (default) : 개수에 상관없이 한줄에 다들어오고 브라우저의 크기를 줄여도 그것에 따라 줄어든다.
  • flex-wrap : nowarp : 브라우저의 크기에 따라 한줄에 들어가는 개수들을 조절한다. (reverse도 가능)
• flex-flow : border 속성을 한줄에 적는 것 처럼 flex-direction과 wrpa의 속성을 한줄에 적을 수 있다.
  • flex-flow : column nowrap (Like this)

justify-content (중심축에서 item을 어떻게 배치할 것인가.)

• flex box를 사용한 후에 전체적인 방향이 수평인지 수직인지를 정한 다음에 한줄에 다 들어오게 할지 많으면 다음줄로 넘길지를 결정한 후에 justify-content를 사용한다.

• flex-start (default) : 왼쪽에서 오른쪽으로 column이면 위에서 아래쪽으로

• flex-end : 오른쪽에서 왼쪽으로 아이템을 배치한다. column이면 아래에서 위쪽으로

• row-reverse와 column-reverse와의 차이점이라면 reverse는 아래에서부터 1번이 시작된다면 flex-end는 순서가 초기값으로 유지된 채로 방향만 바뀐다.

• center : 아이템들을 센터에 넣는다.

• space-around : item 주변으로 space를 넣어주게 된다. 처음과 끝의 요소들의 왼쪽 오른쪽은 한개의 space가 들어가는 반면 중간의 요소들은 앞뒤로 두개의 space가 모이게 된다.

• space-evenly : item 주변으로 동일하게 space가 들어간다.

• space-between : item의 처음과 끝은 축에 붙이고 나머지 중간에만 space를 넣어준다.

align-items (반대축에서 item들을 어떻게 배치 할 것인가.)

• center : 반대축의 중심으로 아이템 정렬
• baseline : 아이템들이 같은 선에 올수 있도록 정렬