Carousel (캐러셀/슬라이더)
여러 컨텐츠를 슬라이드 형태로 보여주는 컴포넌트
Modal (모달/팝업)
기존 페이지 위에 떠있는 창으로, 중요 알림이나 상세 정보를 표시
모달 제목
모달 내용이 여기에 들어갑니다.
Accordion (아코디언)
클릭하면 펼쳐지는 접이식 컨텐츠 컴포넌트
Card (카드)
관련 정보를 담은 컨텐츠를 카드 형태로 보여주는 컴포넌트
카드 제목
카드 내용이 여기에 들어갑니다.
Tooltip (툴팁)
요소에 마우스를 올렸을 때 추가 정보를 보여주는 작은 팝업
Dialog (다이얼로그)
사용자의 응답이나 입력을 요구하는 대화상자
확인
계속 진행하시겠습니까?
Input Field (입력 필드)
한 줄 텍스트를 입력받는 기본적인 입력 창
Textarea (텍스트영역)
여러 줄의 텍스트를 입력할 수 있는 큰 입력 창
Button (버튼)
다양한 크기의 스타일을 가진 클릭 가능한 버튼 컴포넌트
Select Box (선택 상자)
여러 옵션 중 선택할 수 있는 드롭다운 메뉴
Radio Button (라디오 버튼)
여러 옵션 중 하나만 선택 가능한 동그란 버튼
Checkbox (체크박스)
다중 선택이 가능한 네모난 버튼
Progress Bar (진행 바)
진행 상태를 막대 형태로 표시하는 컴포넌트
Loading Spinner (로딩 표시)
데이터 로딩 중임을 알리는 회전하는 아이콘
Toast Message (토스트 메시지)
화면 구석에 잠깐 나타났다 사라지는 알림
Badge (뱃지)
알림이나 상태를 표시하는 작은 표시
Skeleton (스켈레톤)
컨텐츠 로딩 중 임시로 표시되는 뼈대 화면
Pagination (페이지네이션)
여러 페이지의 컨텐츠를 이동할 수 있는 네비게이션
Sidebar (사이드바)
화면 측면에 위치한 보조 네비게이션
사이드바
Menu Bar (메뉴 바)
주요 네비게이션 메뉴를 담은 가로/세로 바
Hamburger Menu (햄버거 메뉴)
세 개의 가로선으로 된 아이콘으로, 클릭 시 메뉴가 펼쳐지는 모바일 네비게이션
Tab Panel (탭 패널)
여러 콘텐츠를 탭으로 구분하여 보여주는 컴포넌트
File Upload (파일 업로드)
드래그 앤 드롭으로 파일을 업로드할 수 있는 컴포넌트
파일을 드래그하거나 클릭하여 업로드
Search Bar (검색창)
검색어 입력과 자동완성을 지원하는 검색 컴포넌트
Rating (별점)
1-5점까지 별점을 매길 수 있는 평가 컴포넌트
Timeline (타임라인)
시간 순서대로 정보를 보여주는 컴포넌트
이벤트 1
2024년 3월 1일
첫 번째 이벤트 내용입니다.
이벤트 2
2024년 3월 15일
두 번째 이벤트 내용입니다.
이벤트 3
2024년 4월 1일
세 번째 이벤트 내용입니다.