# 콘텐츠 레이아웃 패턴 `sc-body` 안에서 사용하는 레이아웃 패턴 모음입니다. --- ## 1. 단일 코드 블록 ```html

src/MyFile.cpp

MyFile.cpp — functionName() C++

// 코드 여기에
void MyFunction() {
    // ...
}

``` **지원 언어**: `language-cpp`, `language-javascript`, `language-python`, `language-plaintext` 등 Highlight.js 지원 언어 모두 사용 가능. --- ## 2. 화면을 채우는 코드 블록 (sc-body-flex 필요) ```html

src/MyFile.cpp

MyFile.cpp C++

      // 긴 코드

``` --- ## 3. 2×2 스텝 그리드 (단계별 절차) 4단계 절차를 카드로 표현할 때 사용합니다. `sc-body-flex` 필요. ```html

① {{단계 제목}}

{{코드 또는 내용}}

``` **카드 수 조정**: 3개는 `grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr;`, 6개는 `1fr 1fr 1fr / 1fr 1fr`. --- ## 4. 2컬럼 레이아웃 (테이블 + 코드) ```html

config.ini

📋 필드 구조

필드	설명	예시
Field1	설명	값

✏️ 등록 방법

config.iniINI

; 코드

💡

팁 제목팁 내용

``` --- ## 5. Callout 변형 ```html

💡

제목내용

⚠️

제목내용

✅

제목내용

🚨

제목내용

``` --- ## 6. 체크리스트 검증 단계나 확인 사항 나열에 사용합니다. ```html

①

항목 제목상세 설명

②

항목 제목상세 설명

``` --- ## 7. Mermaid 다이어그램 ```html

flowchart LR A[시작] --> B{조건} B -->|Yes| C[처리] B -->|No| D[종료] C --> D

``` **주의**: Mermaid는 `mermaid.initialize()`가 실행된 이후 DOM에 있어야 렌더링됩니다. 슬라이드가 처음부터 hidden 상태라면 첫 번째 슬라이드가 아닌 경우 렌더링이 지연될 수 있습니다. 해결: `mermaid.initialize({ startOnLoad: true })`가 보일러플레이트에 포함되어 있으므로 보통 정상 동작합니다. --- ## 8. 플로우 & 파일 목록 (2열 Overview) 전체 흐름과 관련 파일을 한 슬라이드에 나란히 보여줄 때 사용합니다. ```html

🔄 전체 플로우

flowchart TD A[단계 1] --> B[단계 2] --> C[단계 3]

📁 수정 파일

파일명.cpp

파일 역할 설명

``` --- ## 패턴 선택 가이드 | 콘텐츠 유형 | 권장 패턴 | |------------|----------| | 코드 설명 + 짧은 코드 | 패턴 1 (단일 코드 블록) | | 긴 코드 전체 표시 | 패턴 2 (화면 채우는 코드) | | 단계별 절차 (4단계) | 패턴 3 (2×2 스텝 그리드) | | 설정 파일 필드 설명 | 패턴 4 (2컬럼 테이블+코드) | | 주의사항/팁 강조 | 패턴 5 (Callout) | | 체크리스트/검증 | 패턴 6 (체크리스트) | | 전체 흐름 시각화 | 패턴 7 (Mermaid) | | 흐름 + 파일 목록 | 패턴 8 (2열 Overview) |