공통 스타일 가이드

base.css 공통 컴포넌트 시각 확인용 페이지

① BADGE
일반강의라이브강의디지털 상품패키지 상품화상강의Googlemeet Zoom LIVE 예정 종료 판매마감구독중강사학습자관리자답변대기답변중답변완료멤버십 무료
패키지 상품
일반강의
라이브강의
디지털강의
화상강의
결제완료결제취소결제실패결제유예미결제기간만료카드사취소영수증보기
② BUTTON
① 와이드 버튼 440×50 (.btn-wide)
① 카드 등록 버튼 400×50 (.card-register-btn)
② 카드 등록하기 full×50 (.card-add-btn)
② 일반 버튼 150×50 (.btn)
③ 파일선택 / 찜하기 / 공유하기
④ 소형 버튼 70×35 (.btn-sm) + 다운로드/복사
⑤ 더보기 버튼 (.btn-more) — 100% × 60px
⑥ 문의하기 제출 버튼 — 활성/비활성 (.inquiry-submit-btn--inactive)
⑦ 풀 너비 버튼 100%×50 (.btn-full) — 결제하기 페이지용
③ EMPTY STATE

아직 비어있어요

조금만 기다려 주세요.
알찬 상품으로 채워질 예정이에요.

검색 결과가 없어요

다른 검색어로 다시 시도해 주세요.

아직 등록된 게시글이 없어요

이 공간의 첫 이야기를 시작해 보세요.

아직 등록된 공지사항이 없어요

인라인형 (.empty-inline)
아직 작성된 후기가 없어요.모두에게 도움이 되는 상품 후기를 남겨주세요!
구독중인 멤버십이 없어요
받을 수 있는 쿠폰이 비어있어요
④ COURSE CARD RIBBON (상품 리본 배지)
일반강의
--normal (보라)
라이브강의
--live (빨강)
패키지 상품
--package (파랑)
디지털 상품
--digital (어두운)
화상강의
--video (초록)
⑤ DROPDOWN
닫힌 상태
열린 상태
본인 글·댓글 (기본: 텍스트·외곽 회색 / 마우스 오버: 보라)
기본
수정 호버
삭제 호버
타인 글·댓글 — 신고 단독 (기본: 텍스트·외곽 회색 / 마우스 오버: 보라 — 수정/삭제와 동일)
기본
호버
단독 삭제 시 (1:1문의 등)
결제내역 — 문의하기+취소하기 / 문의하기 단독
문의하기+취소하기
문의하기 단독
문의하기 호버
취소하기 호버
구독관리 — 상품더보기+구독취소 (기본: 회색 / 호버: 보라)
기본
상품 더보기 호버
구독 취소 호버
⑥ LEFT SIDEBAR (좌측 메뉴)

⑦ GOODS LIST — 마이페이지 상품 카드

일반강의

대세는 구글 제미나이 완전 정복

입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는 구...

일반강의

대세는 구글 제미나이 완전 정복 - 입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는...

수강기간
2000.00.00 ~ 2000.00.00
전체 진도율
22%
패키지 상품

대세는 구글 제미나이 완전 정복

입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는 구...

패키지 상품

대세는 구글 제미나이 완전 정복 - 입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는...

상품구성
5개 묶음
디지털 상품

대세는 구글 제미나이 완전 정복

입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는 구...

디지털 상품

대세는 구글 제미나이 완전 정복 - 입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는...

다운로드
10회
화상강의

대세는 구글 제미나이 완전 정복

입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는 구...

화상강의

대세는 구글 제미나이 완전 정복 - 입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는...

수강일시
2000.00.00 오후 00:00
라이브강의

대세는 구글 제미나이 완전 정복

입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는 구...

라이브강의

대세는 구글 제미나이 완전 정복 - 입문자도 전문가처럼 쓰는 멀티모달 올인원 대세는...

수강일시
2000.00.00 오후 00:00
⑧ MODAL
팝업 모달
버튼 1개
타이틀

내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용...

버튼 2개 (취소 + 확인)
타이틀

내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용...

토스트 팝업
토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용토스트팝업내용
토스트 — 자유게시판 알림
게시판 열람 권한 없음
해당 게시글은 작성자 또는 운영자만 열람 가능합니다
업로드 용량 초과 (3-a)
파일 용량이 업로드 가능한 최대 용량을 초과했습니다
제목 또는 내용 미입력 (4-a)
제목 또는 내용을 입력해 주세요
게시글 등록 완료 (4-b)
게시글이 등록되었습니다
게시글 삭제 확인 (1-d)
게시글이 삭제되었습니다
댓글 등록 완료 (2-a)
댓글이 등록되었습니다
댓글 삭제 확인 (3-d)
댓글이 삭제되었습니다
댓글 수정 완료 (4-a)
댓글이 수정되었습니다
답글 등록 완료 (5-a)
답글이 등록되었습니다
⑨ MYCOURSE DASHBOARD (일반강의실 대시보드)
① 진도율 게이지 (.mycourse-gauge)
22%
전체 27완료 18미완료 9
② 전체 진도율 바 (.mycourse-side-progress-bar)
22%
③ 탭 — 활성/비활성 (.mycourse-tabs / .mycourse-tab)
④ 버튼 — 더보기(.mycourse-review-more) / 글쓰기(.mycourse-review-write) / 평점(.mycourse-review-rating) / 대시보드 바로가기(.mycourse-side-dashboard)
5.0
⑤ 수료 뱃지 (.mycourse-cert-badge)
수료 전