Flex
flex는 CSS의 속성 중 하나로, 유연한 박스 모델을 만들기 위해 사용됩니다. flex 속성을 부모 요소에 적용하면, 해당 요소의 자식 요소들이 유연하게 배치되어 화면에 표시됩니다. flex는 요소들 간의 공간 배분과 정렬을 관리하며, 반응형 디자인을 구현하는 데 유용합니다.
Flex container
flex-direction: 이 속성은 flex container 내의 요소들이 배치되는 방향을 결정합니다. 주로 row(가로 방향) 또는 column(세로 방향) 값을 가집니다.
flex-wrap: 이 속성은 flex container 내의 요소들이 한 줄에 모두 표시되지 않을 경우 줄 바꿈 여부를 결정합니다. nowrap으로 설정하면 한 줄에 모두 표시하고, wrap으로 설정하면 요소들이 여러 줄에 걸쳐 표시됩니다.
flex-flow: 이 속성은 flex-direction과 flex-wrap 속성을 한 번에 설정하는 단축 속성입니다. 예를 들어, "row nowrap"과 같이 사용할 수 있습니다.
justify-content: 이 속성은 flex container 내의 요소들을 가로 방향으로 정렬하는 방법을 결정합니다. 주로 flex-start(시작점 정렬), flex-end(끝점 정렬), center(가운데 정렬), space-between(요소들 사이에 동일한 간격), space-around(요소들 주위에 동일한 간격) 등의 값을 가집니다.
align-items: 이 속성은 flex container 내의 요소들을 세로 방향으로 정렬하는 방법을 결정합니다. 주로 flex-start(시작점 정렬), flex-end(끝점 정렬), center(가운데 정렬), baseline(글꼴 기준선에 정렬), stretch(컨테이너에 맞게 늘리기) 등의 값을 가집니다.
align-content: 이 속성은 여러 줄에 걸쳐 있는 flex container 내의 요소들을 세로 방향으로 정렬하는 방법을 결정합니다. 주로 flex-start(시작점 정렬), flex-end(끝점 정렬), center(가운데 정렬), space-between(줄 사이에 동일한 간격), space-around(줄 주위에 동일한 간격), stretch(컨테이너에 맞게 늘리기) 등의 값을 가집니다.
Flex item
order: 이 속성은 flex item의 순서를 결정합니다. 숫자를 사용하며, 작은 값일수록 앞으로 배치됩니다.
flex-grow: 이 속성은 flex item이 남은 공간을 얼마나 차지할지를 결정합니다. 숫자 값이며, 다른 flex item들과의 상대적인 비율을 나타냅니다.
flex-shrink: 이 속성은 flex item이 컨테이너보다 작아질 때 얼마나 줄어들지를 결정합니다. 숫자 값이며, 다른 flex item들과의 상대적인 비율을 나타냅니다.
flex-basis: 이 속성은 flex item의 초기 크기를 결정합니다. 주로 픽셀(px) 값이나 퍼센트(%) 값으로 설정됩니다.
flex: 이 속성은 flex-grow, flex-shrink, flex-basis 속성을 한 번에 설정하는 단축 속성입니다. 예를 들어, "1 0 50%"와 같이 사용할 수 있습니다.
Bootstrap
부트스트랩(Bootstrap)은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크입니다. Twitter에서 개발된 이 프레임워크는 HTML, CSS, JavaScript를 기반으로하며, 반응형 웹 디자인 및 효율적인 웹 개발을 쉽게 구현할 수 있도록 도와줍니다. 부트스트랩은 사전에 정의된 CSS 스타일과 JavaScript 플러그인을 포함하고 있어, 웹 페이지의 레이아웃, 버튼, 폼, 타이포그래피, 네비게이션 등을 쉽게 디자인하고 구성할 수 있습니다.
Bootstrap Grid system
부트스트랩 그리드 시스템은 반응형 웹 디자인을 구현하는 데 사용되는 부트스트랩의 핵심 기능입니다. 그리드 시스템은 웹 페이지를 일정한 열로 분할하여 유연한 레이아웃을 구성할 수 있게 도와줍니다. 부트스트랩 그리드 시스템은 12개의 열로 구성되며, 각 열은 컨테이너 내에 배치됩니다. 열은 수평으로 정렬되고, 컨텐츠를 담고 있는 컬럼(column)이라고 불리는 단위로 구성됩니다. 그리드 시스템을 사용하면 다양한 디바이스에서 일관된 레이아웃을 유지하면서 컬럼의 너비를 조정하거나 배치할 수 있습니다.
