😄 개요
오랜만에 CSS 스타일링을 할때 항상 'how to center a div' 부터 검색하곤 합니다.
그만큼 UI를 배치함에 있어서 정렬은 자유자재로 다루어야 하는 스킬입니다.
오늘은 요소를 배치하고 정렬하는 display와 그 외 속성에 대해 다루어 보았습니다.
display 속성
display는 자신과 자식들의 레이아웃을 설정하는 속성입니다.
기본적으로 display는 외부와 내부를 설정하는 값들이 따로 그룹이 되어있고, 둘을 같이 설정할 수 있습니다.
외부
자신이 어떤 박스 모델로 다루어질지 설정합니다.
block과 inline, 그리고 둘을 합쳐놓은 inline-block 세가지 값이 있습니다.
block
block의 특징은 다음과 같습니다.
- block 모델은 한줄을 통으로 차지합니다.
때문에 전후로 어떤 요소가 있던간에 줄바꿈을 하고, 결국 자신의 줄에는 자신만 오게 됩니다. - 너비와 높이를 조정할 수 있습니다.
디폴트 값으로는 자신의 줄 방향으로는 최대로 확장하고, 반대 방향으로는 자식들이 차지하는 최소 길이 만큼만 차지합니다.
|
box1에는 width와 height를 모두 100px,
box2에는 height만 100px,
box3에는 width만 100px,
을 적용한 모습입니다.
|
inline
inline의 특징은 다음과 같습니다.
- inline 모델은 자신의 영역만 차지합니다.
때문에 inline 모델인 요소끼리 같이 나열하면 나란히 붙는걸 볼 수 있습니다. - 너비와 높이를 조정할 수 없습니다.
너비와 높이를 지정하더라도 무시됩니다.
|
box1, box2, box3 모두 inline을 적용한 모습입니다.
|
inline-block
inline-block은 inline과 block의 특징이 섞여 있습니다.
- inline-block 모델은 자신의 영역만 차지합니다.
때문에 inline-block 모델인 요소끼리 같이 나열하면 나란히 붙는걸 볼 수 있습니다. - 너비와 높이를 조정할 수 있습니다.
디폴트 값으로는 자식들이 차지하는 최소 길이만 차지합니다.
|
box1에는 width와 height를 모두 100px,
box2에는 height만 100px,
box3에는 width만 100px,
을 적용한 모습입니다.
|
내부
자신의 자식들이 어떤 레이아웃으로 관리될지 설정합니다.
flow, flex, table, grid 등의 값이 있습니다.
외부와 내부 설정 모두 display 속성에서 다루어지기 때문에,
다음과 같이 display 속성에서 동시에 모두 설정이 가능합니다.
display: block flex /* 외부로는 block, 내부로는 flex로 설정 */
display: inline grid /* 외부로는 inline, 내부로는 grid로 설정 */아래에서 flex 에 대해 더 자세히 다루도록 하겠습니다.
flex
내부의 자식을 flex-box모델로 관리합니다.
flex-box 모델의 특징은 다음과 같습니다.
자식 요소들의 block화
내부의 요소들의 display 외부 속성이 block이 됩니다.
내부 요소에 명시적으로 display에 inline이나, inline-block을 설정하더라도 block 취급 됩니다.
flex 속성을 통한 사이즈 조절
내부의 요소들이 flex 속성을 통해 유동적인 사이즈 조절이 가능합니다.
flex 속성을 지닌 요소들끼리 flex 값 만큼 공간을 나눠 갖게 됩니다.
|
box1에는 flex 없이 width만 50px,
box2에는 flex에 2,
box3에는 flex에 1,
을 적용한 모습입니다.
전체 width에서, box1의 50px을 제외한 나머지 공간을 box2와 box3가 각각 2 : 1 비율로 차지한것을 확인할 수 있습니다.
|
flex-direction 속성을 통한 방향 설정
flex-direction 속성을 활용하면, 자식 요소들이 어떤 방향으로 나열될 지 설정할 수 있습니다.
column과 row 가 있으며, 각각 세로와 가로를 의미합니다. 디폴트 값은 row입니다.
-reverse를 붙이면 역방향으로 전개가 가능합니다.
display: row
|
display: row-reverse
|
display: column
|
display: column-reverse
|
justify-content와 align-items 속성을 활용한 정렬
flex-box 모델 내부의 요소들은 justify-content와 align-items 속성을 이용해 정렬이 가능합니다.
둘의 차이는 어느 방향으로 정렬할 지에 있습니다.
justify-content는 요소의 나열 방향, 그리고 align-items는 요소 나열 방향의 수직방향을 컨트롤 합니다.
justify-content
justify-content에 오는 대표적인 값은 다음과 같습니다.
start
요소들을 첫 부분에 맞춰 정렬
center
요소들을 중앙에 맞춰 정렬
end
요소들을 끝 부분에 맞춰 정렬
space-between
요소들 사이사이에 공간을 넣되, 양 끝에는 공간을 남기지 않게 정렬
space-evenly
요소들 사이사이에 공간을 넣고, 양 끝에도 동일한 사이즈의 공간을 넣게 정렬
space-around
요소들 사이사이에 공간을 넣고, 양 끝에는 절반 사이즈의 공간을 넣게 정렬
flex-direction이 row 일때, 각각의 속성은 다음과 같습니다.
justify-content : start
|
justify-content : center
|
justify-content : end
|
justify-content : space-between
|
justify-content : space-evenly
|
justify-content : space-around
|
align-items
align-items에 오는 대표적인 값은 다음과 같습니다.
start
요소들을 첫 부분에 맞춰 정렬
center
요소들을 중앙에 맞춰 정렬
end
요소들을 끝 부분에 맞춰 정렬
align-items : start
|
align-items : center
|
align-items : end
|
justify-content와 align-items의 예시를 비교해보면, flex의 나열방향이 가로임에 따라 justify-content는 가로 정렬을 컨트롤 하고, align-items는 세로 정렬을 컨트롤 하는 것을 볼 수 있습니다.
Flutter에 익숙하신 분들은 justify-content를 MainAxisAlignment로, align-items를 CrossAxisAlignment로 외우시면 좋을 것 같습니다.
✏️ 정리
display로 할 수 있는 것은 이 보다도 훨씬 많지만, 이 특징들을 가장 많이 사용했던 것 같습니다. 요소들의 레이아웃과 정렬이 UI를 나타내는데 중요한 만큼 두고두고 꺼내 봐야겠습니다.
