Components
컴포넌트
모든 컴포넌트는 e- 접두사 클래스 하나로 시작합니다. 프리뷰 아래 코드를 복사해서 바로 쓰세요.
Button
Badge
Card
Form
Tabs
Alert
Table
Avatar
Pagination
Commerce
기타
Modal
Sheet
Toast
Chat
Menu
Slider
Feedback
Nav
Badge
상태, 카테고리, 태그 표시용 작은 라벨입니다.
EOND UI 배지 8종을 나열해줘: e-badge 기본, e-badge-accent, e-badge-dark, e-badge-success, e-badge-danger, e-badge-warning, e-badge-info, e-badge-outline.
기본
액센트
다크
성공
위험
경고
정보
아웃라인
상품 상태 배지 (el_main 계승)
마켓 상품에 붙일 상태 배지를 EOND UI로 만들어줘: e-badge-hot / e-badge-new / e-badge-best / e-badge-free / e-badge-sale. mono 대문자 스타일은 클래스에 내장돼 있으니 따로 스타일링하지 마.
HOT
NEW
BEST
FREE
30% SALE
Card
콘텐츠를 담는 컨테이너입니다. 백그라운드와 보더를 제공합니다.
EOND UI 카드 3종을 만들어줘: 기본 e-card, 회색 배경 e-card-muted, 호버 시 떠오르는 e-card e-card-hover. 호버 효과를 커스텀 CSS로 다시 만들지 마.
Form
입력 필드, 선택 컨트롤 등 폼 요소들입니다.
EOND UI 폼으로 이름 입력(e-label + e-input + e-help), 분야 셀렉트(e-select), 문의 내용(e-textarea)을 세로로 배치해줘. 포커스 링은 시스템 기본을 그대로 써.
도움말 텍스트입니다.
EOND UI로 체크박스(e-check-label + e-checkbox), 라디오 2개(같은 name), 토글 스위치(e-switch, 하나는 checked)를 만들어줘.
EOND UI 인풋 그룹을 만들어줘: div.e-input-group 안에 e-input + e-btn e-btn-primary(검색/구독 버튼). 주소·단위 표시는 span.e-input-addon을 앞이나 뒤에. 라운딩은 양끝만 자동 처리돼.
https://
원
EOND UI로 아이콘 인풋과 비밀번호 인풋을 만들어줘. 아이콘 인풋은 div.e-field > span.e-field-icon(svg) + e-input. 비밀번호는 div.e-field.e-field-trail > e-input[type=password] + button.e-field-btn[data-eui-password](누르면 표시/숨김 자동 토글, eondui.js 포함).
EOND UI 검색+셀렉트(콤보박스)를 만들어줘: div.e-combo[data-eui-combo] 안에 input.e-input + div.e-combo-list > button.e-combo-item[data-value]들. 입력하면 목록이 필터링되고, 선택하면 컨테이너 data-value에 값이 담기며 eui:change 이벤트가 발생해. eondui.js 포함.
타이핑하면 목록이 걸러집니다.
EOND UI 폼 상태를 보여줘: 오류 인풋은 e-input에 aria-invalid="true" + p.e-help.e-help-error 메시지, 비활성은 disabled 속성만. 커스텀 색을 만들지 마.
올바른 이메일 형식이 아닙니다.
아이디는 변경할 수 없습니다.
Tabs
콘텐츠를 탭으로 구분합니다. 라인 또는 필 형태입니다.
EOND UI 라인 탭(e-tabs > e-tab)을 만들어줘. 활성 탭은 .active 클래스로 — 오렌지 밑줄이 자동 적용돼.
같은 탭을 알약형(e-tabs e-tabs-pill)으로 바꿔줘. 활성 탭은 다크 배경으로 자동 처리돼.
탭 카운트
탭 옆에 항목 수를 e-tab-count로 붙여줘. mono 폰트와 tabular-nums가 내장돼 있어.
Alert
사용자에게 중요한 정보를 알립니다.
EOND UI 알럿 5종(기본 / e-alert-info / e-alert-success / e-alert-warning / e-alert-danger)을 세로로 쌓아줘. 각각 strong 제목 + 설명문 형태로.
기본 — 일반적인 안내 메시지입니다.
정보 — 유용한 정보를 제공합니다.
성공 — 작업이 완료되었습니다.
경고 — 주의가 필요합니다.
오류 — 문제가 발생했습니다.
Table
데이터를 표로 표시합니다. 호버 상태를 지원합니다.
EOND UI 테이블(e-table e-table-hover)로 프로젝트 목록을 만들어줘. 상태 열에는 e-badge 변형을 활용해.
| 프로젝트 | 분야 | 상태 | 금액 |
|---|---|---|---|
| 포트폴리오 웹사이트 | 기업 | 진행중 | 2,500,000 |
| 모바일 앱 개발 | 공공기관 | 검수중 | 5,200,000 |
| CMS 솔루션 | 병의원 | 계획 | 1,800,000 |
Avatar
사용자 또는 프로필 이미지를 표시합니다.
EOND UI 아바타 3크기(e-avatar-sm / e-avatar / e-avatar-lg)를 이니셜 텍스트로 보여줘. 이미지가 있으면 img를 안에 넣으면 돼.
은
온
디
Pagination
페이지 네비게이션을 제공합니다.
EOND UI 페이지네이션을 만들어줘: nav.e-pagination 안에 e-page 링크들, 현재 페이지는 .active, 말줄임은 span.e-page.
Commerce
el_main 마켓에서 흡수한 커머스 전용 컴포넌트입니다. 가격은 mono 폰트와 tabular-nums로 숫자 폭을 고정합니다.
가격 표기를 EOND UI로 만들어줘: 정가는 e-price, 할인 전 취소선은 e-price-old, 무료는 e-price-free. 숫자 폭이 고정되는 mono tabular가 내장돼 있어.
일반 상품
39,000원
할인 상품
39,000원 59,000원
무료
무료
상품 카드 (썸네일 + 배지 + 가격 조합)
EOND UI로 상품 카드를 만들어줘: e-card e-card-hover 안에 e-thumb(16:10) 썸네일, e-badge-hot·e-badge-sale 배지, 제목, e-price + e-price-old. 전자책이면 썸네일을 e-thumb-book(2:3)으로.
HOT
30% SALE
라이믹스 매거진 테마
39,000원 59,000원
CMS 실전 가이드
무료
기타
그 외 자주 쓰는 요소들입니다.
EOND UI 유틸을 보여줘: 단축키는 kbd.e-kbd, 구분선은 hr.e-divider, 숫자 지표는 e-stat(e-stat-value / e-stat-label / e-stat-desc).
키보드 단축키
⌘
K
500+
완료 프로젝트
2000년부터 현재까지
98%
고객 만족도
최근 1년 평균
24/7
기술 지원
언제든 연락하세요
Modal
eondui.js의 EUI.open/close 또는 data-eui-open 속성으로 제어합니다. 백드롭·ESC·바깥 클릭 닫기가 내장됩니다.
EOND UI 모달을 만들어줘: div.e-modal(고유 id) 안에 e-modal-box > e-modal-head(제목+e-modal-close 닫기버튼) + e-modal-body + e-modal-foot(e-btn-ghost 취소 / e-btn-primary 확인). 여는 버튼에는 data-eui-open='#그id', 닫는 요소에는 data-eui-close. eondui.js 포함.
Bottom Sheet
모바일 우선 하단 패널입니다. 데스크탑에서는 중앙 480px로 뜹니다. 모달과 같은 방식으로 제어합니다.
EOND UI 바텀시트를 만들어줘: div.e-sheet(고유 id) 안에 e-sheet-handle 바 + e-sheet-body(제목·내용·버튼). 여는 버튼 data-eui-open='#그id', 닫기는 data-eui-close. eondui.js 포함.
Toast · 알림
하단 중앙 토스트와 우측 슬라이드 알림. EUI.toast() 한 줄로 띄웁니다. 3초 후 자동으로 사라집니다.
EOND UI 토스트를 써줘: 저장 성공 시 EUI.toast('저장되었습니다', {type:'success'}), 오류 시 type:'danger'. 하단 중앙에 뜨고 3초 뒤 사라져. eondui.js 포함.
우측에서 슬라이드되는 알림 메시지를 EOND UI로: EUI.toast('새 문의가 도착했습니다', {position:'right', type:'accent', duration:4000}). eondui.js 포함.
Chat
상담·문의용 채팅창입니다. 상대 말풍선은 e-msg, 내 말풍선은 e-msg mine, 입력 중 표시는 e-msg-typing.
EOND UI 채팅창을 만들어줘: e-chat 컨테이너에 e-chat-head(e-avatar + e-chat-name + e-chat-status), e-chat-body(상대는 e-msg, 나는 e-msg mine, 시간은 e-msg-time, 입력 중은 e-msg-typing에 span 3개), e-chat-input(e-input + e-btn e-btn-primary). 높이는 컨테이너에서 지정.
온
이온디 상담
상담 가능
안녕하세요! 무엇을 도와드릴까요?
오후 2:14
홈페이지에 AI 챗봇을 붙이고 싶은데 기간이 얼마나 걸릴까요?
오후 2:15
보통 2~4주 정도 걸립니다. 사용하시는 채널(홈페이지/카카오톡)을 알려주시면 더 정확히 안내드릴게요.
Slider
네이티브 input[type=range] 기반이라 폼 전송·접근성이 그대로 동작합니다. 채움 진행 표시는 eondui.js가 자동 처리합니다. (el_imin_ui에서 흡수)
EOND UI 슬라이더를 만들어줘: input[type=range]에 class="e-slider"만. min/max/step/value는 네이티브 속성 그대로, 채움 진행 표시는 eondui.js가 자동이라 따로 코딩하지 마.
Feedback
로딩·진행 상태 표시 3종: 진행바, 스피너, 스켈레톤.
EOND UI 진행바: div.e-progress 안에 div.e-progress-bar, 진행률은 style='width:60%'.
EOND UI 스피너 3크기: e-spinner-sm / e-spinner / e-spinner-lg.
EOND UI 스켈레톤 로딩: 아바타 자리는 e-skeleton e-skeleton-circle, 텍스트 줄은 e-skeleton e-skeleton-text(너비 다르게). 카드 로딩 상태를 만들어줘.