jonbeo 님의 블로그

Ant Design 설치부터 버튼·테이블·폼까지 – 실전으로 배우는 기본 컴포넌트

이번 포스팅에서는 **Ant Design(antd)**의 기본 사용법을 소개합니다.MUI보다 Business UI에 강하고, 기능이 풍부해서관리자 페이지나 백오피스 제작에 많이 사용되는 프레임워크입니다.지금부터 설치부터 실전 예제까지 한 번에 살펴볼게요! ✅ antd 설치하기npm install antd 그리고 스타일을 직접 import 해줘야 합니다:import 'antd/dist/reset.css'; // v5 기준 ✅ 1. Button 사용해보기import { Button } from 'antd';function App() { return ( Primary Default Dashed Text );} 타입설명primary강조 버튼default일반..

MUI 설치부터 버튼·카드·모달까지 – 실습으로 배우는 기본 컴포넌트

MUI(Material UI)는 리액트에서 가장 많이 쓰이는 UI 프레임워크 중 하나입니다.이번 포스팅에서는 MUI를 설치하고,실제로 자주 사용하는 버튼, 카드, 모달 컴포넌트를 직접 다뤄보며 사용법을 익혀보겠습니다. ✅ MUI 설치하기npm install @mui/material @emotion/react @emotion/styled💡 MUI는 Emotion을 기본 스타일 엔진으로 사용하기 때문에 위 세 개를 함께 설치해야 합니다. ✅ 1. MUI 버튼 사용해보기import Button from '@mui/material/Button';function App() { return ( Contained Outlined Text );} 타입설명contained..

MUI vs Ant Design – 어떤 UI 라이브러리를 선택해야 할까?

리액트로 프로젝트를 하다 보면 가장 먼저 부딪히는 고민,“UI 라이브러리를 뭘 쓸까?” 입니다. 대표적인 두 가지는 바로MUI(Material UI) 와 Ant Design(antd) 이번 포스팅에서는이 두 라이브러리를 기능, 디자인, 학습 난이도, 생태계 등 기준으로 비교해보고,어떤 프로젝트에 어떤 선택이 더 적합한지 정리해볼까 합니다. ✅ MUI(Material UI)란?구글의 Material Design 가이드라인을 기반으로 만들어진 UI 프레임워크빠르고 직관적인 컴포넌트 구성공식 웹사이트: https://mui.com장점컴포넌트 스타일이 모던하고 깔끔Theme 커스터마이징이 강력함TypeScript 지원이 뛰어남단점Material Design에 익숙하지 않으면 다소 낯설게 느껴질 수 있음일부 고급..

실전 예제 – Grid로 반응형 카드형 갤러리 만들기

이제까지 Grid의 핵심 속성들과 고급 기능들을 배워봤다면,이번엔 그걸 활용해서 반응형 카드 갤러리 레이아웃을 직접 만들어볼 차례예요!auto-fit + minmax + gap + grid-template-columns이 조합으로 깔끔하고 유연한 그리드 레이아웃을 완성할 수 있어요. ✅ 목표 레이아웃가로폭이 넓을 땐 4~5열 카드좁아지면 자동으로 3열 → 2열 → 1열로 유연하게 변신카드 간격은 gap, 크기는 minmax()로 관리 🧱 HTML 구조 1 2 3 4 5 6 🎨 CSS 스타일.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 20..

repeat, minmax, auto-fill, auto-fit 완전정복 – 똑똑한 Grid를 만드는 고급 기술들

CSS Grid는 단순히 열을 나열하는 것뿐 아니라상황에 따라 자동으로 조정되는 반응형 레이아웃을 만들 수 있는고급 함수들도 제공합니다.이번 포스팅에서는 가장 많이 쓰이는 4가지 키워드를 정리해볼게요:repeat()minmax()auto-fillauto-fit ✅ 1. repeat()grid-template-columns: repeat(3, 1fr); → 1fr 1fr 1fr을 간단하게 줄인 형태예요.반복되는 패턴을 간단하게 작성할 수 있어요. ✅ 2. minmax()grid-template-columns: repeat(3, minmax(200px, 1fr)); → 각 열의 최소 너비는 200px, 최대는 남은 공간만큼→ 창 크기에 따라 유연하게 반응하는 열을 만들 수 있어요! ✅ 3. auto-fill..

Grid 레이아웃의 가장 강력한 기능 중 하나는하나의 아이템이 여러 칸을 차지할 수 있다는 점이에요.Flexbox에서는 어렵거나 비효율적이었던“두 칸짜리 카드”, “헤더 전체 확장” 같은 걸Grid에서는 grid-column과 grid-row로 아주 쉽게 만들 수 있어요! ✅ 기본 문법.item { grid-column: 1 / 3; /* 1번 선부터 3번 선 전까지 → 2칸 차지 */} 속성설명 grid-column열 방향 병합grid-row행 방향 병합 🔁 단축 표기grid-column: span 2; /* 현재 위치에서 오른쪽 2칸 차지 */grid-row: span 3; /* 현재 위치에서 아래로 3칸 차지 */ → 시작 지점 모를 때는 span으로만 간단하게! 🧪 실습 예시 ..

CSS Grid의 진짜 매력은HTML 요소의 순서와 관계없이,디자인 구조를 CSS 코드만으로 배치할 수 있다는 점이에요.특히 grid-area와 grid-template-areas를 쓰면코드로 마치 도면 그리듯 레이아웃을 설계할 수 있어요.이번 포스팅에서는 바로 그 기능을 실습 예제와 함께 보겠습니다! ✅ 기본 구성 예시 Header Sidebar Main Footer 🎨 CSS 스타일 구성.grid { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto..

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는CSS Grid의 차례입니다. Flex가 “흐름 기반”이라면,Grid는 “정해진 틀 기반”입니다.그만큼 레이아웃 설계가 더 직관적이고 강력해져요! ✅ display: grid란?.container { display: grid;} 이 한 줄로 Grid 컨테이너가 만들어집니다.그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다. 🧩 기본 속성 정리속성설명grid-template-columns열(column) 개수 및 너비 설정grid-template-rows행(row) 개수 및 높이 설정gap셀 사이 간격 (row + column 동..

지금까지 Flexbox의 핵심 속성들을 하나씩 알아봤습니다.이번엔 그 모든 걸 한 번에 실습해보는 카드 UI 예제로 정리해볼게요!display: flexflex-wrapgapflex-basis, flex-growjustify-content, align-items전부 다 써보면서 유연하고 정돈된 레이아웃을 만들어봅니다. ✅ 완성될 레이아웃 미리 보기화면이 넓을 땐 카드가 3개씩 가로 정렬좁아지면 자동으로 줄바꿈 (flex-wrap)카드 사이 간격은 gap으로 관리각 카드는 일정한 크기로 나열되며, 여백에 따라 비율로 조정 (flex-basis, flex-grow) 🧱 HTML 구조 Card 1 Card 2 Card 3 Card 4 Card 5 🎨 CSS 스타일.card-wrap { disp..

Flexbox 레이아웃을 만들 때,아이템 사이 간격을 주려고 margin-right, margin-bottom… 복잡하게 썼던 경험 있죠?이젠 그럴 필요 없어요!gap 속성 하나면 모든 아이템 간 간격을 한 번에 정리할 수 있어요! ✅ 기본 문법.container { display: flex; gap: 20px;} gap은 아이템 사이의 공간만 설정해주는 속성이에요.바깥쪽 여백은 적용되지 않고,첫 요소와 마지막 요소 바깥은 건드리지 않아요! 📐 두 가지 버전으로 쓸 수 있어요gap: 20px; /* row + column 모두 20px */gap: 20px 10px; /* row 간격 20px, column 간격 10px */💡 Flexbox에선 주로 gap: 20px 단일값으로 ..