
[CSS] Flexbox와 Grid 레이아웃
Style sheet/CSS
2023. 7. 20. 13:49
Flexbox와 Grid 레이아웃은 CSS3에서 도입된 레이아웃 기술로, 웹 페이지의 요소들을 간편하고 유연하게 배치할 수 있도록 해주는 기능입니다. 각각의 특징과 사용 방법에 대해 설명하겠습니다. 1. Flexbox 레이아웃 Flexbox(Flexible Box)는 1차원 레이아웃을 지원하는 기술로, 요소들을 행 또는 열로 정렬하여 배치합니다. 주로 수평 또는 수직 중 하나의 방향으로만 정렬하는 데 사용됩니다. Flexbox를 사용하면 요소들의 크기, 간격, 정렬 등을 유연하게 조절할 수 있습니다. 주요 속성 display: flex: Flex 컨테이너를 생성합니다. flex-direction: Flex 아이템들의 배치 방향을 설정합니다 (row, row-reverse, column, column-re..