codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
산내캠핑 패턴: 좌측 월별 캘린더(예약가능/잔여적음/마감 색상 표시) + 우측 프리미엄 사이트 컴팩트 카드 4종 + 안내 알림.
HTML 컨텐츠
<div class="container content-space-1"><div class="text-center mb-7"><span class="text-cap text-primary">{{badge_text}}</span><h2>{{title}}</h2><p class="w-md-75 mx-md-auto">{{subtitle}}</p></div><div class="row align-items-start"><div class="col-lg-6 mb-7 mb-lg-0"><div class="card card-bordered shadow-sm"><div class="card-header bg-soft-primary border-0"><div class="d-flex justify-content-between align-items-center"><button type="button" class="btn btn-sm btn-link text-dark p-1"><i class="bi-chevron-left fs-4"></i></button><h5 class="mb-0">{{year_month}}</h5><button type="button" class="btn btn-sm btn-link text-dark p-1"><i class="bi-chevron-right fs-4"></i></button></div></div><div class="card-body"><table class="table table-borderless text-center mb-0 align-middle ures-cal-table" style="table-layout:fixed;width:100%"><thead class="border-bottom"><tr><th class="text-danger fw-medium small p-1">일</th><th class="fw-medium small p-1">월</th><th class="fw-medium small p-1">화</th><th class="fw-medium small p-1">수</th><th class="fw-medium small p-1">목</th><th class="fw-medium small p-1">금</th><th class="text-primary fw-medium small p-1">토</th></tr></thead><tbody><tr><td class="p-1"><span class="text-muted">29</span></td><td class="p-1"><span class="text-muted">30</span></td><td class="p-1"><span class="text-muted">31</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">1</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">2</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">3</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">4</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">5</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">6</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">7</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">8</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">9</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">10</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">11</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">12</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">13</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">14</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">15</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">16</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">17</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">18</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">19</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-primary text-white fw-bold shadow-sm fw-medium" style="width:1.75rem;height:1.75rem">20</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">21</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">22</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">23</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-warning text-warning fw-medium" style="width:1.75rem;height:1.75rem">24</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">25</span></td></tr><tr><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-danger text-danger fw-medium" style="width:1.75rem;height:1.75rem">26</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">27</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">28</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">29</span></td><td class="p-1"><span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-success text-success fw-medium" style="width:1.75rem;height:1.75rem">30</span></td><td class="p-1"><span class="text-muted">1</span></td><td class="p-1"><span class="text-muted">2</span></td></tr></tbody></table><div class="d-flex flex-wrap justify-content-center gap-3 mt-3 small fw-medium text-dark"><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-success me-2" style="width:0.65rem;height:0.65rem"></span>예약 가능</span><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-warning me-2" style="width:0.65rem;height:0.65rem"></span>잔여 적음</span><span class="d-inline-flex align-items-center"><span class="d-inline-block rounded-circle bg-danger me-2" style="width:0.65rem;height:0.65rem"></span>예약 마감</span></div></div></div><div class="alert alert-soft-warning d-flex mt-3 mb-0"><i class="bi-info-circle-fill flex-shrink-0 fs-4 me-3"></i><div><strong class="d-block mb-1">예약 안내</strong><span class="d-block small" style="white-space:pre-line">{{notice}}</span></div></div></div><div class="col-lg-6"><div class="mb-3"><h4 class="mb-1">{{site_list_title}}</h4><span class="small text-body d-block">선택된 기간: <strong class="text-dark">{{selected_range}}</strong></span></div><div class="d-grid gap-3"><div class="card card-bordered shadow-sm"> <div class="card-body p-3"> <div class="d-flex"> <img class="rounded flex-shrink-0" src="{{site1_image}}" alt="" style="width:100px;height:100px;object-fit:cover"> <div class="flex-grow-1 ms-3 d-flex flex-column"> <h6 class="mb-1">{{site1_name}}</h6> <ul class="list-inline small text-body mb-2"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site1_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site1_capacity}}</li> </ul> <div class="d-flex justify-content-between align-items-center mt-auto"> <span class="text-primary fw-bold">{{site1_price}}</span> <a class="btn btn-primary btn-sm" href="{{site1_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div> </div></div><div class="card card-bordered shadow-sm"> <div class="card-body p-3"> <div class="d-flex"> <img class="rounded flex-shrink-0" src="{{site2_image}}" alt="" style="width:100px;height:100px;object-fit:cover"> <div class="flex-grow-1 ms-3 d-flex flex-column"> <h6 class="mb-1">{{site2_name}}</h6> <ul class="list-inline small text-body mb-2"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site2_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site2_capacity}}</li> </ul> <div class="d-flex justify-content-between align-items-center mt-auto"> <span class="text-primary fw-bold">{{site2_price}}</span> <a class="btn btn-primary btn-sm" href="{{site2_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div> </div></div><div class="card card-bordered shadow-sm"> <div class="card-body p-3"> <div class="d-flex"> <img class="rounded flex-shrink-0" src="{{site3_image}}" alt="" style="width:100px;height:100px;object-fit:cover"> <div class="flex-grow-1 ms-3 d-flex flex-column"> <h6 class="mb-1">{{site3_name}}</h6> <ul class="list-inline small text-body mb-2"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site3_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site3_capacity}}</li> </ul> <div class="d-flex justify-content-between align-items-center mt-auto"> <span class="text-primary fw-bold">{{site3_price}}</span> <a class="btn btn-primary btn-sm" href="{{site3_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div> </div></div><div class="card card-bordered shadow-sm"> <div class="card-body p-3"> <div class="d-flex"> <img class="rounded flex-shrink-0" src="{{site4_image}}" alt="" style="width:100px;height:100px;object-fit:cover"> <div class="flex-grow-1 ms-3 d-flex flex-column"> <h6 class="mb-1">{{site4_name}}</h6> <ul class="list-inline small text-body mb-2"> <li class="list-inline-item me-3"><i class="bi-aspect-ratio me-1"></i>{{site4_size}}</li> <li class="list-inline-item"><i class="bi-people me-1"></i>{{site4_capacity}}</li> </ul> <div class="d-flex justify-content-between align-items-center mt-auto"> <span class="text-primary fw-bold">{{site4_price}}</span> <a class="btn btn-primary btn-sm" href="{{site4_link}}">선택하기 <i class="bi-chevron-right ms-1"></i></a> </div> </div> </div> </div></div></div></div></div></div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장