728x90 반응형 리액트 CSS3 [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. [React] 리액트에서 Chakra UI, Chakra Icons 사용하기 📌 차크라 란? (Chakra UI)Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리로컴포넌트 기반 스타일링과 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. 컴포넌트 기반 스타일링 다양한 기본 컴포넌트를 제공해, 이를 활용해 빠르게 스타일을 적용할 수 있습니다.테마 설정 테마 설정을 통해 전체적인 스타일 일관성을 유지하고, 쉽게 커스터마이징할 수 있습니다.반응형 디자인 기본적으로 반응형 디자인을 지원하여 다양한 디바이스 환경에 대응할 수 있습니다.접근성 웹 접근성을 고려한 컴포넌트를 제공하여, 접근성을 높일 수 있습니다.📌 Tailwind CSS vs Chakra UI 테일윈드(Tailwind CSS) 개별 스타일을 유틸리티 클래스를 통해 직접 정의하는 방식 차크라(Chak.. 2024. 9. 25. [React] 리액트에서 CSS 적용하는 여러가지 방식(Import, 인라인, CSS Module, Styled-Components) 📌 React에 CSS 적용하기 create-react-app으로 만든 React 프로젝트에서는 CSS를 사용하기 위해 따로 설정할 필요가 없습니다.기본적으로 CSS를 다룰 수 있도록 준비되어 있습니다. css-loader @import, url() 등 CSS 파일에서 다른 파일을 불러오거나 이미지를 사용할 수 있게 도와줌 style-loader 태그를 통해 CSS를 DOM에 적용 📌 React에서 CSS 처리방법Import (전역 방식)인라인(inline) 스타일CSS Module (클래스명이 고유한 해시값으로 변환) Styled-Components 라이브러리 🔎 Import (전역 방식)가장 기본적인 방법으로, 컴포넌트에서 CSS 파일을 직접 import하여 사용합니다.className 속성을.. 2024. 9. 20. 이전 1 다음 728x90 반응형
