Flexbox2 [CSS 핵심강좌] 5. Flexbox CSS Flexbox는 요소들을 일차원적인 열 또는 행으로 배치하고, 공간을 쉽게 조절할 수 있는 레이아웃 기법입니다. 이 강좌에서는 Flexbox의 기본 개념과 사용 방법에 대해 알아보겠습니다. Flex 컨테이너 Flexbox를 사용하려면 먼저 Flex 컨테이너를 설정해야 합니다. Flex 컨테이너는 display: flex 또는 display: inline-flex 속성을 적용한 요소입니다. Flex 컨테이너 내부의 직계 자식 요소들을 Flex 아이템이라고 합니다. .container { display: flex; } 주 축과 교차 축 Flexbox에서는 주 축(main axis)과 교차 축(cross axis)이라는 개념이 중요합니다. 주 축은 Flex 아이템들이 나열되는 방향을 결정하고, 교차 축.. 2023. 3. 4. CSS flexbox 개념 정리 CSS의 flexbox는 웹 페이지의 레이아웃을 관리하는 데 매우 유용한 기능입니다. 이 글에서는 flexbox의 기본 개념과 기능에 대해 설명하겠습니다. Flexbox란? Flexbox는 CSS의 레이아웃 모듈 중 하나로, 요소의 크기와 위치를 조정하는 데 사용됩니다. Flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고 간격을 조절하는 등의 작업이 가능해집니다. Flexbox는 부모 요소인 flex container와 그 안에 들어가는 자식 요소인 flex item으로 구성됩니다. flex container는 display 속성을 이용하여 선언하며, flex item은 flex container 안에 있는 요소입니다. Flex Container의 속성 Flex container는 다음과 같은 .. 2023. 2. 27. 이전 1 다음 반응형
