Display
웹페이지 상에서 element가 어떻게 보여지고 다른 element와 어떻게 상호 배치되는 지를 결정한다.
Display : inline
display property가 inline으로 지정된 element는 줄바꿈 없이 한 줄에 다른 element와 나란히 배치된다.
inline element는 width와 height property를 지정해도 무시된다. 왜냐하면 inline element는 content의 크기만큼만 공간을 차지할 수 있기 때문이다.
또한, inline element는 좌,우의 margin만 가질 수 있고, padding은 상,하,좌,우 모두 가질 수 있다.
Display : block
display property가 block으로 지정된 element는 전후 줄바꿈이 들어가 다른 element를 다른 줄로 밀어내고 자신이 속한 영역의 너비를 모두 차지한다.
block element는 width, height, margin, padding이 모두 반영된다.
Display : inlin-block
display property가 inline-block으로 지정된 element는 inline element처럼 자신의 content 크기만큼만 차지하여 다른 element와 나란히 배치되지만, block element처럼 width, height, margin, paddingd이 모두 반영된다.
Display : flex(=flex box)
display : flex는 하나의 flex item이 자신의 flex container가 차지하는 공간에 맞추기 위해 크기를 늘리거나 줄이는 방법을 설정하는 property.
element에 display : flex를 설정하면 flex box를 만들수 있는데, flex box는 parent element인 flex container와 children element인 flex item으로 구성된다.
display : flex가 적용된 element는 flex container, display : flex가 적용된 element의 children element는 flex item이 된다.
Flex container
flex box의 전체적인 정렬과 flow property를 정의한다.
property
- flex-direction : flex item을 배치할 때 사용할 main axis(주축) 및 방향(정방향, 역방향)을 지정한다.
- row
- row-reverse
- column
- column-reverse
- flew-wrap : flex item elements를 강제로 한줄에 배치할것인지, 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표헌 할 것이지를 결정한다.
- : nowrap : 기본 설정값으로, flex container의 영역을 벗어나더라도 flex item을 한 줄에 배치한다. 시작점은 flex-direction에 의해 결정된 방향으로 적용된다.
- : wrap : flex item이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치된다. nowrap과 마찬가지로 element가 배치되는 시작점은 flex-direction에 의해 결정된다. 일반적으로 위 -> 아래로 쌓이는 순서이다.
- : wrap-reverse : wrap과 동일하지만, element가 나열되는 시작점과 끝점의 기준이 반대로 배치된다.
- justify-content : 브라우저가 content 항목과 주변 공간 사이를 main axis를 기준으로 어떻게 정렬할것인지를 정의한다.
- align-items : cross axis(교차축)에 대해 flex item을 정렬하는 방식을 정의한다.
Flex item
크기나 순서에 관련된 속성을 정의한다.
flex item의 위치는 main axis(주축)에 따라 결정되며, main axis의 방향은 flex container의 flex-direction으로 설정한다.(기본적으로 main axis는 row property로 설정.)
flex-direction의 row property는 왼쪽 - > 오른쪽 방향으로, coloumn property는 위 -> 아래 방향으로 main axis를 설정한다.
