`flexbox`는 CSS3에서 도입된 레이아웃 모델로, 웹 페이지의 요소를 유연하게 배치하기 위해 사용되는 CSS 속성들의 집합입니다. `flexbox`를 이용하면 컨테이너와 그 안의 요소들을 가로 또는 세로 방향으로 정렬하고 배치할 수 있습니다.
`flexbox`는 주로 부모 요소인 컨테이너와 그 자식 요소인 아이템들을 다루는데 사용됩니다. 컨테이너에 `display: flex;`를 설정하면 해당 요소는 `flexbox` 레이아웃 모드로 전환됩니다.
`flexbox`를 사용할 때 자주 쓰이는 속성들은 다음과 같습니다:
1. `display: flex;`: 컨테이너를 `flexbox` 레이아웃 모드로 전환합니다.
2. `flex-direction`: 컨테이너 안의 아이템들의 배치 방향을 지정합니다. (`row`, `column`, `row-reverse`, `column-reverse` 등)
3. `justify-content`: 주 축(main axis)을 기준으로 아이템들을 정렬합니다. (`flex-start`, `flex-end`, `center`, `space-between`, `space-around` 등)
4. `align-items`: 교차 축(cross axis)을 기준으로 아이템들을 정렬합니다. (`flex-start`, `flex-end`, `center`, `baseline`, `stretch` 등)
5. `flex`: 아이템의 크기 비율을 지정합니다. (`flex-grow`, `flex-shrink`, `flex-basis`를 함께 사용)
`flexbox`는 웹 페이지의 레이아웃을 보다 유연하고 간편하게 구성할 수 있도록 도와주며, 반응형 디자인과 아이템들 간의 간격을 쉽게 조절하는 데에 유용합니다. 많은 브라우저에서 지원되고 있으므로 현대적인 웹 디자인에서 많이 사용되고 있습니다.
'frontend > HTML' 카테고리의 다른 글
| <div class=>`와 `<div id=>`의 차이 (0) | 2023.07.21 |
|---|---|
| 크로스플랫폼과 html (0) | 2023.07.21 |
| 문서 구조화하기 (0) | 2023.07.21 |
| HTML5 144개의 태그 중 가장 많이 쓰이는 것 (0) | 2023.07.21 |
| div 태그 - 일단 큰 덩어리를 나눠 놓을 것 (0) | 2023.07.20 |
| table 태그 기본 (0) | 2023.07.20 |
| HTML 문서의 기본 구조에 대한 설명 (0) | 2023.07.20 |
| 예약 캘린더 구축 : 테이블 태그 또는 캘린더 라이브러리 1 (0) | 2023.07.19 |
