SDK 연동
스타일링
TapKit UI 스타일 커스터마이징
스타일링
TapKit은 style 속성으로 직접 크기와 위치를 지정합니다.
기본 사용법
style 속성으로 크기를 지정합니다.
const kit = document.querySelector('tap-kit');
kit.style.width = '400px';
kit.style.height = '600px';또는 HTML에서 직접 지정:
<tap-kit
style="width: 400px; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>표시 모드
TapKit은 3가지 표시 모드를 지원합니다.
| 모드 | 설명 | 배치 |
|---|---|---|
inline | 페이지 콘텐츠에 임베드 (기본값) | 선언된 위치 |
floating | 컴팩트 위젯 | position: fixed |
sidebar | 전체 높이 사이드바 | position: fixed |
<tap-kit mode="inline" ...></tap-kit>
<tap-kit mode="floating" ...></tap-kit>
<tap-kit mode="sidebar" ...></tap-kit>Inline 모드 (기본값)
Inline 모드는 페이지 콘텐츠에 자연스럽게 임베드됩니다.
<tap-kit
style="width: 100%; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>사이드바 레이아웃 예시
<style>
.app-layout {
display: grid;
grid-template-columns: 1fr 400px;
height: 100vh;
}
</style>
<div class="app-layout">
<main><!-- 강의 콘텐츠 --></main>
<tap-kit
style="width: 100%; height: 100%;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>
</div>Floating 모드
Floating 모드는 position: fixed로 화면에 고정됩니다.
<tap-kit
mode="floating"
style="width: 380px; height: 600px;"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>Floating/Sidebar 모드에서는 SDK가 자동으로 위치를 관리합니다.
필요한 경우 style 속성으로 크기만 조정하세요.
Sidebar 모드
Sidebar 모드는 화면 우측에 전체 높이로 표시됩니다.
<tap-kit
mode="sidebar"
user-id="..."
course-id="..."
clip-id="..."
></tap-kit>사용자가 드래그로 너비를 조절할 수 있습니다.
레이아웃 토글
기본적으로 사용자가 Floating ↔ Sidebar 모드를 전환할 수 있습니다. 이를 비활성화하려면:
<tap-kit mode="floating" allow-layout-toggle="false" ...></tap-kit>kit.allowLayoutToggle = false;반응형 디자인
미디어 쿼리로 반응형 크기를 지정합니다.
<style>
tap-kit {
width: 100%;
height: 500px;
}
@media (min-width: 768px) {
tap-kit {
width: 500px;
height: 700px;
}
}
</style>
<tap-kit user-id="..." course-id="..." clip-id="..."></tap-kit>모드 비교
| 특징 | Inline 모드 | Floating/Sidebar 모드 |
|---|---|---|
| 배치 | 페이지 콘텐츠 내부 | 화면에 떠있음 (fixed) |
| 위치 제어 | 부모 요소에 의존 | SDK 자동 관리 |
| 레이아웃 영향 | 있음 | 없음 |
| 사용 사례 | 사이드바, 콘텐츠 일부 | 채팅 위젯 |
| 기본값 | ✅ v2.0+ |