margin, padding

margin

박스의 바깥쪽 여백, 다른 요소와 얼마나 떨어져있는가

padding

박스 안쪽 여백

position

position: relative;
일반적인 순서에 따라 배치

position: absolute;
relative를 가지고 있는 요소(부모요소)를 기준으로 움직임


position: fixed;
윈도우 화면을 중심으로 움직임

position: sticky;
스크롤을 해도 위치가 고정됨

flex

박스의 위치나 나열 속성 값을 정할 수 있는 태그

display: flex;
기본방향: row(가로로 나열됨)

그럼 flex(기본방향이 가로)로 지정된 것을 세로로 나열하려면?

display: flex;
flex-direction: column;

중심축을 column 즉, 세로로 변경함

align-items

중심축의 반대축에서 요소를 어떻게 정렬할 것인지를 지정

center: 가운데 정렬

flex-end: 아래쪽부터 정렬

flex-start: 위쪽부터 정렬

justify-content

중심축에서 요소를 어떻게 정렬할지 지정

space-between: 첫 요소와 마지막 요소를 각각의 끝에 두고, 나머지 요소 사이 간격을 균일하게 배분

space-around: 첫 요소와 마지막 요소 옆에도 간격 배분

space-evenly: 모든 요소 사이에 간격 균일하게 배분

flex-wrap

flex-wrap: wrap;
부모 요소 크기에 맞추어 각 요소의 사이즈를 줄이지 않고 배열, 만약 자리가 모자라면 균일한 크기로 다음 줄로 배열해줌

flex-wrap: nowrap;
기본 값, 부모 요소의 크기에 맞추어 모든 요소를 배열, 자리가 모자라지 않게 배열하다 보니 요소 크기가 줄어들 수도 있다