`, ``, ``, `` 같은 인라인 태그에
`line-height`, `font-size`, `letter-spacing`을 직접 인라인 style로 지정 금지
- 필요한 경우 클래스 또는 부모 요소에서만 지정
- ❌ `NetworkVariable`
- ✅ `NetworkVariable` (부모의 line-height 상속)
→ 편집기에서 부모의 line-height/letter-spacing 변경이 자식까지 자연 적용
### C. 텍스트 + 인라인 태그 혼합 시 단일 부모로 유지
설명 한 문단은 한 요소 안에 모두 넣되, 강조는 인라인 태그로:
- ✅ `호스트가 5~15초 간격으로 SendHeartbeatPingAsync() 호출. 30초 이상 미전송 시 로비 자동 삭제됨.
`
- ❌ `호스트가 5~15초간격으로...` (조각내지 말 것)
→ 편집기 우측 텍스트 패널에서 HTML 모드로 한 번에 줄바꿈/수정 가능
### D. 레이아웃은 정상 흐름(flex/grid) 유지
- 본문 콘텐츠에 `position: absolute`, `left`, `top` 직접 지정 금지
- 모든 카드/박스/텍스트는 `.c2`, `.col`, flex/grid의 자연 흐름에 맡길 것
- 절대 위치는 `.glow`, `.bg-grid`, 표지의 장식 패널 같은 고정 장식에만 사용
→ 편집기에서 클릭/드래그 시 필요한 요소만 자동으로 absolute 전환됨
→ 처음부터 absolute가 깔려 있으면 형제 요소가 reflow되며 레이아웃 깨짐
### E. 인라인 아이콘은 별도 요소로 감싸기
이모지/아이콘과 텍스트를 같은 flex 컨테이너 안에 넣을 때:
- ✅ `❤Heartbeat`
- ❌ `❤ Heartbeat` (텍스트 노드와 섞이면 편집기에서 아이콘만 선택 불가)
→ 아이콘만 따로 위치 조정/색상 변경 가능
### F. 슬라이드 ID 연속성
- 모든 슬라이드 `id="s0"`부터 1씩 증가 (s0, s1, s2 ...)
- 누락/중복/건너뜀 금지
- 첫 슬라이드만 `class="slide active"`, 나머지는 `class="slide"`
→ 편집기 좌측 슬라이드 목록 및 점 네비게이션 정상 동작
### G. 줄바꿈은 `
` 사용
문단 내 줄바꿈은 `
` 태그로:
- ✅ `첫 줄
두번째 줄
`
- ❌ `첫 줄
두번째 줄
` (분리하면 편집 단위가 나뉨)
→ 편집기에서 Enter 키로 자연스럽게 줄바꿈 가능
## ⓬ C# 소스코드 컬러 (Visual Studio Dark 테마 기반)
C#·Unity 코드를 보여줄 때는 아래 규칙으로 토큰별 색상을 입혀라.
인라인 `` 한 줄짜리, 그리고 여러 줄 `` 블록 모두 동일하게 적용.
### 토큰 색상 팔레트 (CSS 변수로 :root에 추가)
```
:root {
--cs-keyword: #569cd6; /* public, void, class, if, return, await, using, namespace, var */
--cs-control: #c586c0; /* if, else, for, foreach, while, return, yield, throw, await, async (제어 키워드) */
--cs-type: #4ec9b0; /* string, int, bool, void, NetworkVariable, Lobby, MonoBehaviour 등 타입 */
--cs-string: #ce9178; /* "문자열", $"보간문자열", '문자' */
--cs-number: #b5cea8; /* 숫자 리터럴, true/false/null */
--cs-method: #dcdcaa; /* 메서드/함수 이름 (정의·호출) */
--cs-prop: #9cdcfe; /* 변수, 매개변수, 속성, 필드 */
--cs-comment: #6a9955; /* // 주석, /* 블록주석 */
--cs-attr: #c8c8c8; /* [Attribute], [ServerRpc] 등 어트리뷰트 */
--cs-punct: #d4d4d4; /* 괄호, 콤마, 세미콜론 */
}
```
### 코드 블록 컨테이너 스타일
```
pre.cs, code.cs-block {
font-family:'JetBrains Mono', monospace;
font-size:13px;
line-height:1.65;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
border-radius:8px;
padding:14px 16px;
color:var(--cs-punct);
white-space:pre;
overflow:hidden;
}
```
### 토큰 마크업 — 각 토큰을 `` + 색상 클래스로 감싼다
```
.cs-k { color:var(--cs-keyword); } /* keyword */
.cs-c { color:var(--cs-control); font-weight:500; } /* control */
.cs-t { color:var(--cs-type); } /* type */
.cs-s { color:var(--cs-string); } /* string */
.cs-n { color:var(--cs-number); } /* number */
.cs-m { color:var(--cs-method); } /* method */
.cs-p { color:var(--cs-prop); } /* property/variable */
.cs-cm { color:var(--cs-comment); font-style:italic; } /* comment */
.cs-a { color:var(--cs-attr); } /* attribute */
```
### 마크업 예시 (한 줄 인라인)
```
public async Task<Lobby> CreateLobbyAsync(string name, int maxPlayers)
```
### 마크업 예시 (여러 줄 블록)
```
[ServerRpc]
public void SubmitScoreServerRpc(int score)
{
// 서버에서만 실행됨
_score.Value += score;
if (_score.Value > 100)
BroadcastWinClientRpc("Game Over");
}
```
### 토큰 분류 규칙 (반드시 이 매핑으로)
| 토큰 종류 | 클래스 | 예시 |
|---------|--------|------|
| 선언/접근 키워드 | `cs-k` | `public`, `private`, `static`, `class`, `void`, `var`, `using`, `namespace`, `new`, `this`, `base`, `async`, `await` |
| 제어 키워드 | `cs-c` | `if`, `else`, `for`, `foreach`, `while`, `return`, `yield`, `throw`, `try`, `catch`, `switch`, `case` |
| 타입 | `cs-t` | `string`, `int`, `bool`, `float`, `double`, `Task`, `List`, `Lobby`, `NetworkVariable`, 사용자 정의 클래스/인터페이스 |
| 문자열 | `cs-s` | `"text"`, `$"interp{x}"`, `@"raw"` (보간식 안 변수는 `cs-p`로 다시 감쌈) |
| 숫자/리터럴 | `cs-n` | `42`, `3.14f`, `true`, `false`, `null` |
| 메서드 | `cs-m` | 정의된/호출된 함수 이름 (`Start`, `CreateLobbyAsync`, `Debug.Log`의 `Log`) |
| 변수/속성 | `cs-p` | 매개변수, 지역변수, 필드, 속성 (`name`, `_score`, `Value`) |
| 주석 | `cs-cm` | `// ...`, `/* ... */` |
| 어트리뷰트 | `cs-a` | `[ServerRpc]`, `[SerializeField]` 전체를 한 span으로 |
| 구두점·기타 | (감싸지 않음) | `(`, `)`, `,`, `;`, `=`, `+`, `.` 등 — `pre.cs`의 기본 색(`--cs-punct`) 사용 |
### 주의
- 한 코드 블록에서 같은 식별자라도 **선언 위치는 `cs-m` 또는 `cs-p`, 사용 위치도 동일 클래스** 유지 → 색이 깜빡이지 않음
- `<` `>` 는 HTML 충돌 방지로 `<` `>` 사용
- 들여쓰기는 공백 4칸 (탭 사용 금지)
- 줄바꿈은 그냥 개행 — `pre`가 보존
- 인라인 한 줄 코드 (`` 단독)는 클래스 없이 그냥 텍스트만으로 두고, **여러 줄 또는 강조하고 싶은 한 줄**에만 토큰 색상 적용
```
---
## 📌 주제 요청 예시
### 예시 1 — 기본
```
주제: Unity Netcode for GameObjects (NGO) 개념 정리
슬라이드 수: 8장
언어: 한국어
```
### 예시 2 — 슬라이드 구성 직접 지정
```
주제: Git 브랜치 전략 (Git Flow / GitHub Flow / Trunk-Based)
슬라이드 수: 9장
슬라이드 구성:
1. 표지
2. 버전 관리란?
3. 브랜치 개념
4. Git Flow 설명
5. GitHub Flow 설명
6. Trunk-Based Development
7. 세 가지 비교
8. 팀 규모별 선택 가이드
9. 핵심 요약
언어: 한국어
```
### 예시 3 — 강조 색상 커스텀
```
주제: Docker & Kubernetes 기초
슬라이드 수: 10장
메인 강조색: #0ea5e9 (하늘색, Docker 브랜드)
언어: 한국어
```
> 강조색을 바꿀 때는 --accent 변수 값과
> .bg-grid의 rgba 색상, .kicker의 색상,
> .tg 클래스, .glow의 radial-gradient 색상을 함께 변경해야 합니다.
---
## 🎨 슬라이드 구성 패턴 레퍼런스
| 패턴 | 클래스 조합 | 적합한 내용 |
|------|------------|------------|
| 2단 카드 | `c2 > col > card*N` | 비교, 특징 나열 |
| 2단 코드+설명 | `c2 > (code-wrap + col)` | API 설명, 코드 분석 |
| 전체 스텝 | `vstep` | 순서가 중요한 흐름 |
| 2단 스텝+다이어그램 | `c2 > (vstep + arch)` | 설치·설정 가이드 |
| 3단 카드 | `c3 > card*3` | 3가지 개념 비교 |
| 비교 테이블 | `tbl` | 다항목 스펙 비교 |
| 흐름 다이어그램 | `ab + 화살표` | 아키텍처, 데이터 흐름 |
| 수치 강조 | `bignum + hb` | 요금, 제한, 통계 |
| 표지 | `kicker + 대제목 + badge` | 표지 고정 패턴 |
---
## ⚠️ 자주 발생하는 오류와 해결법
| 오류 | 원인 | 해결 |
|------|------|------|
| 글자가 검정으로 보임 | color 미지정 | 모든 태그에 color:inherit 전역 적용 |
| 슬라이드 하단 잘림 | 콘텐츠 높이 초과 | 패딩 축소, 폰트 축소, gap 축소 |
| 슬라이드 번호 불일치 | TOTAL 값 오류 | TOTAL = 실제 슬라이드 수와 일치 |
| 점 네비게이션 오작동 | s0~sN ID 누락 | 모든 슬라이드 id="s0"부터 순서대로 |
| 모바일에서 작게 보임 | rescale 미적용 | JS rescale() 함수 반드시 포함 |
| 카드 배경이 흰색 | --bg2 미적용 | background:var(--bg2) 명시 |
| 편집기 리사이즈 시 코드 잘림 | box-sizing:content-box 기본값 | `* { box-sizing: border-box; }` 전역 적용 (⓫-A) |
| 부모 line-height 변경 시 코드만 안 바뀜 | 자식 ``에 인라인 line-height 직접 지정 | 자식 인라인 스타일 제거, 부모 상속 (⓫-B) |
| 인라인 요소 위치 변경 시 형제가 reflow | 처음부터 position:absolute 사용 | flex/grid 정상 흐름 사용, 절대위치는 장식만 (⓫-D) |
| 아이콘만 따로 선택/이동 불가 | 텍스트 노드와 아이콘이 같은 요소 안 혼재 | 아이콘을 별도 ``으로 감싸기 (⓫-E) |
| 한 문단을 편집기에서 한 번에 수정 불가 | 한 문장을 여러 ``/`
`로 분할 | 단일 부모 요소 안에 인라인 태그로 강조 (⓫-C) |