728x90 반응형 flex3 [React] Chakra UI 주요 컴포넌트, Chakra UI 요소 📌 Chakra UI 주요 컴포넌트Chakra UI는 React 기반의 UI 라이브러리로, 간단한 코드만으로 세련된 UI를 쉽게 구현할 수 있습니다.특히 레이아웃과 UI 요소를 위한 다양한 컴포넌트를 제공하여복잡한 페이지 구조를 간편하게 만들 수 있습니다.Chakra UI의 주요 레이아웃 컴포넌트와 자주 사용하는 UI 요소들을 살펴보겠습니다. 🔎 리액트 속성 정의Chakra UI 컴포넌트 옵션을 작성할 때, 아래 두 가지 방식을 사용할 수 있습니다. a=" " : 기본적인 HTML 속성 문법 a={} : React에서 사용되는 JSX 문법 📌 레이아웃 관련 주요 컴포넌트컴포넌트명설명Flex & Spacer유연한 레이아웃을 구성하는 Flex와요소 간의 간격을 균일하게 조정하는 Spacer를.. 2024. 9. 25. [CSS] CSS Flex 완벽 가이드 CSS Flex BoxFlex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. (부모요소) Container ▶ display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, (자식요소) Items ▶ order, flex, align-self 등의 속성을 사용할 수 있습니다. Flex ContainerFlex C.. 2024. 5. 20. [CSS] CSS Flex(display: flex) 레이아웃 구성과 정렬 display : flex 정리 1 2 3 4 5 display : flex부모 클래스에 flex 속성을 줘야 나머지 flex 속성을 사용할 수 있다..box_wrap{ display: flex;}display : flex-direction : 정렬의 방향을 선택 정방향 : row; 정방향 + 역순정렬 : row-reverse; 세로방향 : column; 세로방향 + 역순정렬 : column-reverse;.box_wrap{ display: flex; flex-direction : row;// flex-direction : row-reverse;// flex-direction : column;// flex-direction : col.. 2024. 5. 13. 이전 1 다음 728x90 반응형
