display는 요소의 종류를 선택하는 속성이다.
block 형식은 한 줄 모두를 차지하며, 넓이와 높이 설정이 가능하다.
inline 형식은 내용만큼 차지하며, 넓이와 높이 속성을 지정할 수 없다. 또한 margin 속성은 좌우로만 지정할 수 있다.
inline-~ 형식은 inline 요소처럼 표현되지만 block 처럼 사용할 수 있다.
요즘 가장 자주 사용하는 속성은 flex가 아닐까 싶다.
flex 속성은 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 방법을 제공한다.
flex는 Container, Itmes 두 개념으로 나뉜다. Container는 Items를 감싸는 부모 요소이며, 각 Items를 정렬하기 위해선 Container가 필수이다.
Container에는 display, justify-content, align-items 등의 속성이 사용되며,
Items에는 order, flex, align-self 등의 속성이 사용된다.
자주 사용하는 속성들에 대해 알아보자.
flex-direction
: Items의 주 축(main axis)을 설정합니다. row
가 기본 값이다. column
으로 설정할경우 주축이 세로 방향으로 바뀌며, 항목들은 열로 나열된다. *-reverse
로 지정하게 되면 시작 방향이 바뀌게 된다.
flex-wrap
: 기본 값은 nowrap
이며, 항목들의 넓이의 합이 flex 박스의 넓이를 넘어섰을 때, 줄바꿈을 할지 결정한다.
flex-flow
: flex-direction
속성과 flex-wrap
속성을 합친 속성으로, flex-direction
, flex-wrap
값 순서로 사용한다.
flex-basis
: 항목들의 넓이를 설정한다. flex 컨테이너의 flex-basis
기본 값은 'auto'이다.
flex-grow
: flex-grow 값을 양수로 지정하면 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어난다.
flex-shrink
: flex-shrink 속성은 주축의 공간이 부족할 때 각 항목의 사이즈 줄이는 방법을 정의한다.
위 세 속성은 축약형으로 사용할 수 있으며 flex : flex-grow
flex-shrink
flex-basis
순서로 사용할 수 있다.
flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들도 있다.
<positive-number>
flex 항목을 flex: initial로 지정하면 flex: 0 1 auto 로 지정한 것과 동일하게 동작한다. 이 경우, flex 항목들은 flex-grow가 0이므로 flex-basis값보다 커지지 않고 flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어든다. 또, flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지한다.
flex: auto 로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며, flex:initial 과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다르다.
flex: none으로 지정하면 flex: 0 0 auto으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 flex-basis를 auto로 지정했을 때 정해지는 크기로 결정된다.
이 축약형은 더 축약해서 flex: 1 이나 flex: 2처럼 쓸수도 있는데, 이는 flex-grow 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 flex: 2는 flex: 2 1 0와 동일하게 처리된다.
align-items
: 교차축(direction이 row라면 y축)에 따른 항목들의 정렬 방법을 정한다.
align-self
: align-items
가 항목들의 정렬 방법을 정한다면, align-self
는 항목의 정렬 방법을 정한다.
justify-content
: 주축의 방향에 따른 flex 항목들의 정렬 방법을 정한다.
참고 - cssreference.io, flexbox의 기본개념
대상을 보이거나 보이지 않게 지정하는 속성으로 visible
, hidden
, collapse
등을 값으로 사용할 수 있다.
display: none 과 visibility: hidden 을 비교하는 질문이 나올 수 있다.
display: none은 공간을 차지하지 않고, visibility: hidden은 공간을 차지한다.
즉, display는 레이아웃의 변화를 야기하기 때문에 reflow, repaint 가 발생하지만, visibility 는 레이아웃에 영향을 주지 않으므로 repaint만 발생한다.