컨텐츠로 건너뛰기

아코디언과 탭

이 문서는 아코디언과 탭을 실제 운영 문서에서 어떻게 다양하게 조합해 쓰는지 설명합니다. 한 줄 텍스트부터 여러 줄 절차, 코드블럭과 콜아웃이 섞인 복합 패턴까지 포함해 작성 기준을 통일할 수 있도록 구성했습니다. FAQ도 같은 접기/펼치기 계열로 함께 관리해 문서 응답 형식을 일관되게 유지합니다.

아코디언

아코디언은 긴 문서에서 세부 설명을 접어 읽기 흐름을 가볍게 유지할 때 유용합니다. 내용의 길이나 구성 방식에 따라 단순 텍스트형과 복합 서식형으로 나누어 작성하면 관리가 쉬워집니다.

한 줄 텍스트

한 줄 안내를 접어 넣을 때는 가장 단순한 형태로 작성합니다. 경고 한 줄, 정책 한 줄, 참고 한 줄처럼 짧은 정보에 적합합니다.

작성 방법

제목에는 사용자가 펼치기 전에도 의미를 알 수 있는 문구를 넣습니다. 본문에는 핵심 문장 한 줄만 배치해 스캔 속도를 유지합니다.

작성 문법

:::zippy[배포 전 확인]
승인 완료 후에만 운영 반영을 진행합니다.
:::

렌더링

배포 전 확인

승인 완료 후에만 운영 반영을 진행합니다.

여러 줄 텍스트

절차나 체크리스트처럼 여러 줄 설명이 필요한 경우에 사용합니다. 단계형 정보는 번호 목록을 함께 쓰면 문서 해석이 훨씬 안정적입니다.

작성 방법

첫 줄에는 목적을 적고, 이후 줄에서는 순서/조건/예외를 분리합니다. 여러 문단이 들어갈 때는 각 문단의 역할이 겹치지 않게 구성하는 것이 중요합니다.

작성 문법

:::zippy[설치 순서]
설치 작업은 아래 순서로 진행합니다.
1. 버전 확인
2. 백업 수행
3. 반영
4. 결과 검증
:::

렌더링

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 꽃이 피면 봄이 오고 낙엽이 지면 가을이 온다는 것을 누구나 알고 있다. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 어릴 적 뛰어놀던 골목길의 추억이 문득 떠올라 미소를 짓게 되었다.

설치 순서

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가나다라마바사아자차카타파하, 이것은 화면 서식 확인을 위한 더미 텍스트입니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore.
  2. 빛이 있으면 그림자가 따르고, 모든 시작은 한 걸음에서 비롯됩니다. Duis aute irure dolor in reprehenderit.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다.
  4. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

다중 아코디언

하나의 문서 구간에 여러 아코디언 제목을 연속으로 배치하면, 사용자는 필요한 항목만 선택해서 펼쳐볼 수 있습니다. 운영 문서에서는 공통 안내, 예외 조건, 장애 대응처럼 성격이 다른 정보를 분리할 때 이 패턴이 특히 유용합니다.

작성 방법

각 아코디언 제목은 서로 겹치지 않는 주제로 나누고, 제목만 봐도 열어볼 필요를 판단할 수 있게 작성합니다. 항목 수가 늘어날수록 제목의 일관성이 중요하므로, 확인, 절차, 예외 같은 고정 접두어를 팀 규칙으로 정해 사용하는 것을 권장합니다.

작성 문법

:::zippy[사전 확인]
배포 전에 권한과 승인 상태를 먼저 점검합니다.
:::
:::zippy[반영 절차]
반영은 점검 완료 후 순차적으로 진행합니다.
:::
:::zippy[예외 처리]
실패 시에는 즉시 롤백 기준에 따라 이전 버전으로 복구합니다.
:::

렌더링

사전 확인

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 가을에는 열매가 익고, 겨울에는 눈이 내립니다. Duis aute irure dolor in reprehenderit in voluptate.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
  • 새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. Sed ut perspiciatis unde omnis iste natus error.
반영 절차

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 이것은 더미 텍스트로 서식 확인용입니다.
  2. Duis aute irure dolor in reprehenderit. 가나다라마바사아자차카타파하, 내용 없이 형식만 표현합니다.
  3. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
  4. 빛이 있으면 그림자가 따릅니다. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 계절은 반복되지만 매번 새롭습니다. Excepteur sint occaecat cupidatat non proident.

예외 처리

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 모든 시작은 한 걸음에서 비롯됩니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 구름 위에서 바람이 불고, 강물은 유유히 흘러갑니다. Excepteur sint occaecat cupidatat non proident, sunt in culpa.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 이것은 더미 텍스트입니다.
  2. 빛이 있으면 반드시 그림자가 따르는 법입니다. Duis aute irure dolor in reprehenderit.
  3. Excepteur sint occaecat cupidatat non proident. 강물은 유유히 흘러갑니다.

다중 아코디언 확장형

다중 아코디언에서도 각 항목 안에 여러 줄 문단, 목록, 인라인 코드를 함께 사용할 수 있습니다. 이 방식을 쓰면 문서 길이를 무작정 늘리지 않고도 항목별 상세도를 충분히 확보할 수 있습니다.

작성 방법

각 아코디언 항목은 첫 문단에서 결론을 먼저 제시하고, 아래에 상세 단계나 조건을 목록으로 분리해 작성합니다. 항목마다 정보 깊이를 비슷하게 맞추면 특정 항목만 과도하게 길어지는 문제를 줄일 수 있습니다.

작성 문법

:::zippy[운영 체크]
운영 체크는 반영 직전의 안정성 확인을 목적으로 합니다.
- 승인 상태 확인
- 배포 시간대 확인
- 담당자 연락 경로 확인
:::
:::zippy[기술 체크]
기술 체크는 실행 가능성과 복구 가능성을 함께 점검합니다.
- `pnpm run build` 성공 여부
- 로그 수집 경로 확인
- 롤백 커맨드 사전 준비
:::

렌더링

운영 체크

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가나다라마바사아자차카타파하, 이것은 화면 서식과 레이아웃 확인을 위한 더미 텍스트입니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Duis aute irure dolor in reprehenderit in voluptate.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.
  • 새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. Sed ut perspiciatis unde omnis iste natus error.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. 계절은 반복되지만 매번 새롭습니다.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 모든 시작은 한 걸음에서 비롯됩니다.

기술 체크

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • lorem --ipsum dolor sit amet, consectetur adipiscing elit. 이것은 더미 텍스트입니다.
  • Duis aute irure dolor in reprehenderit in voluptate. 빛이 있으면 그림자가 따릅니다.
  • Excepteur sint occaecat cupidatat non proident. 가나다라마바사아자차카타파하.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 이것은 더미 텍스트로 서식 확인용입니다.
  2. 빛이 있으면 그림자가 따르고, 모든 시작은 한 걸음입니다. Duis aute irure dolor in reprehenderit.
  3. Excepteur sint occaecat cupidatat non proident. 계절은 반복되지만 매번 새롭습니다.

여러 서식 포함

아코디언 내부에 목록, 인라인 코드, 코드블럭, 콜아웃 등을 함께 넣을 수 있습니다. 운영 문서에서는 이 패턴을 사용하면 “요약은 본문, 세부는 아코디언 내부” 구조를 안정적으로 만들 수 있습니다.

작성 방법

복합 서식이 들어갈 때는 바깥 컨테이너 콜론 수를 올려 파싱 충돌을 피합니다. 특히 내부에 다른 디렉티브가 있으면 ::::zippy 형태로 한 단계 올리는 규칙을 지키는 것이 안전합니다.

작성 문법

::::zippy[고급 점검]
배포 전 `pnpm run build` 결과를 먼저 확인합니다.
:::note
운영 반영 전 승인자 확인이 필요합니다.
:::
```bash
pnpm run build
pnpm run preview
```
- 실패 로그는 즉시 공유
- 롤백 기준은 사전 합의
::::

렌더링

고급 점검

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가나다라마바사아자차카타파하, 이것은 화면 서식 확인을 위한 더미 텍스트입니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Terminal window
lorem --ipsum --dolor
sit --amet consectetur
  • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • 가을에는 열매가 익고, 겨울에는 눈이 내립니다. Duis aute irure dolor in reprehenderit in voluptate.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.
  • 새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. Sed ut perspiciatis unde omnis iste natus error.

탭은 동일 주제를 관점별로 비교할 때 사용합니다. 요약/상세, OS별 명령, 역할별 절차를 한 위치에서 전환할 수 있어 문서 길이를 줄이고 탐색 속도를 높일 수 있습니다.

단순 텍스트 탭

짧은 비교 문장을 탭으로 나눌 때 적합합니다. 옵션 A/B 요약이나 환경별 한 줄 차이를 표현할 때 가장 간단하게 사용할 수 있습니다.

작성 방법

탭 제목은 비교 기준이 드러나도록 짧게 쓰고, 본문은 한두 문장으로 요약합니다. 탭 수가 늘어나면 사용자가 전환 피로를 느끼므로 핵심 기준만 남기는 것이 좋습니다.

작성 문법

::::tabs
:::tab[요약]
변경 목적과 영향 범위를 먼저 설명합니다.
:::
:::tab[상세]
실행 순서와 검증 항목을 단계별로 설명합니다.
:::
::::

렌더링

    여러 줄 탭

    탭 내부에 문단과 목록을 함께 사용해 상세 설명을 나눌 수 있습니다. 긴 설명을 한 페이지에 유지하면서도 관점별 분리를 명확히 할 수 있습니다.

    작성 방법

    각 탭은 동일한 정보 밀도로 맞추는 것이 좋습니다. 한 탭만 지나치게 길어지면 비교 구조가 무너질 수 있으므로, 필요하면 아코디언을 추가해 내부도 계층화합니다.

    작성 문법

    ::::tabs
    :::tab[운영팀]
    운영팀은 반영 전 체크리스트를 먼저 확인합니다.
    - 승인 상태 확인
    - 배포 창구 확인
    - 롤백 담당 확인
    :::
    :::tab[개발팀]
    개발팀은 배포 패키지와 로그 기준을 먼저 확인합니다.
    - 빌드 아티팩트 확인
    - 마이그레이션 영향 점검
    - 모니터링 지표 기준 확인
    :::
    ::::

    렌더링

      여러 서식 포함 탭

      코드블럭, 인라인 코드, 링크를 함께 넣는 패턴입니다. 플랫폼별 명령이나 환경별 스크립트를 비교할 때 가장 많이 쓰입니다.

      작성 방법

      탭별 코드블럭 언어를 정확히 지정하면 복사/가독성이 좋아집니다. 동일 의미의 명령은 탭마다 구조를 맞춰야 독자가 실수 없이 자신의 환경만 선택해 실행할 수 있습니다.

      작성 문법

      ::::tabs
      :::tab[Windows]
      Windows 환경에서는 PowerShell 기준으로 점검합니다.
      ```powershell
      winget --version
      ```
      참고: 실행 전 `관리자 권한` 여부를 확인합니다.
      :::
      :::tab[macOS]
      macOS 환경에서는 시스템 버전과 셸 환경을 함께 확인합니다.
      ```bash
      sw_vers
      ```
      참고: `zsh` 환경 변수 반영 여부를 점검합니다.
      :::
      :::tab[Linux]
      Linux 환경에서는 커널 정보와 배포판 정보를 함께 기록합니다.
      ```bash
      uname -a
      ```
      참고: 배포판별 패키지 관리자 차이를 확인합니다.
      :::
      ::::

      렌더링

        FAQ

        FAQ는 반복 질문을 표준 응답 형태로 고정해 운영 문서의 응답 품질을 균일하게 유지할 때 사용합니다. 아코디언 패턴으로 구성하면 질문 목록이 길어져도 탐색 부담이 적고, 질문 추가 시 기존 문서 구조를 크게 바꾸지 않아도 됩니다.

        단일 질문

        질문이 적은 문서에서는 핵심 질문부터 단일 항목으로 시작하는 것이 좋습니다. 이후 반복 문의가 늘어나면 같은 형식으로 항목을 확장해 관리할 수 있습니다.

        작성 방법

        질문 제목은 실제 문의 문장을 그대로 쓰고, 답변 첫 문장은 결론형으로 시작합니다. 상세 절차는 두 번째 문단이나 목록으로 분리하면 읽기 부담이 줄어듭니다.

        작성 문법

        ::::faq
        :::q[FAQ는 언제 쓰나요?]
        반복 질문이 많은 운영 문서에서 사용합니다.
        :::
        ::::

        렌더링

        Lorem ipsum dolor sit amet consectetur?

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 가나다라마바사아자차카타파하, 이것은 화면 서식 확인을 위한 더미 텍스트입니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

        • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Duis aute irure dolor in reprehenderit. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 빛이 있으면 반드시 그림자가 따르는 법입니다.

        사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.

        복수 질문

        FAQ가 누적될수록 질문 간 중복을 줄이는 편집 기준이 중요해집니다. 같은 주제의 변형 질문은 하나로 통합하고, 답변에서 예외 조건만 분기하는 방식을 권장합니다.

        작성 방법

        질문 순서는 조회 빈도가 높은 항목부터 배치합니다. 답변 길이는 짧은 결론 + 필요한 경우 목록형 절차로 맞추면 운영 문서 품질이 일정하게 유지됩니다.

        작성 문법

        ::::faq
        :::q[FAQ는 언제 쓰나요?]
        반복 질문이 많은 운영 문서에서 사용합니다.
        :::
        :::q[답변 길이는 어느 정도가 적절한가요?]
        핵심 답변을 먼저 쓰고, 상세 절차는 3~5줄로 정리합니다.
        :::
        :::q[질문이 많아지면 어떻게 관리하나요?]
        중복 질문을 통합하고 제목을 실제 문의 문장에 맞춰 유지합니다.
        :::
        ::::

        렌더링

        Lorem ipsum dolor sit amet consectetur?

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 강물은 유유히 흘러가고, 구름은 바람에 따라 모양을 바꿉니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation.

        • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • 가나다라마바사아자차카타파하. Duis aute irure dolor in reprehenderit in voluptate velit esse. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        Sed do eiusmod tempor incididunt ut labore et dolore?

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 새는 하늘을 날고, 물고기는 물 속을 헤엄칩니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

        1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 이것은 더미 텍스트입니다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        2. 계절은 반복되지만 매번 새롭습니다. Duis aute irure dolor in reprehenderit in voluptate. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        3. Excepteur sint occaecat cupidatat non proident. 가나다라마바사아자차카타파하. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.

        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 모든 시작은 한 걸음에서 비롯됩니다.

        Ut enim ad minim veniam quis nostrud?

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.

        • ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • 가을에는 열매가 익고, 겨울에는 눈이 내립니다. Duis aute irure dolor in reprehenderit. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.
        • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 사람들은 저마다의 꿈을 가지고 그것을 향해 한 걸음씩 나아가고 있다. 함께하는 시간이 소중하다는 것을 알게 된 것은 그리 오래되지 않았다. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 길을 걷다 보면 예상치 못한 아름다운 풍경을 만나게 될 때가 있다. 산과 들에 나무들이 푸르게 자라나고 맑은 시냇물이 흘러가고 있었다.

        복합 중첩

        탭 안에 아코디언과 콜아웃 중첩

        탭과 아코디언을 결합하면 관점을 분리하면서도 각 탭 안에서 세부 항목을 추가로 접을 수 있습니다. 콜아웃까지 함께 넣으면 경고나 안내를 시각적으로 분리한 채로 정보 계층을 유지할 수 있습니다.

        작성 방법

        탭과 아코디언을 중첩할 때는 바깥 컨테이너 콜론 수를 단계별로 올려 파싱 충돌을 방지합니다. ::: 콘텐츠가 내부에 들어가면 탭은 ::::tab, 탭 컨테이너는 :::::tabs로 한 단계씩 올려야 합니다.

        작성 문법

        :::::tabs
        ::::tab[A 탭]
        ...
        :::note
        안내 메시지
        :::
        :::zippy[세부 항목]
        - 항목 1
        - 항목 2
        :::
        ::::
        ::::tab[B 탭]
        ...
        :::caution
        경고 메시지
        :::
        :::zippy[세부 항목]
        - 항목 1
        - 항목 2
        :::
        ::::
        :::::

        렌더링

          아코디언 안에 탭과 코드블럭 중첩

          아코디언 안에 탭을 넣으면 접힌 상태에서 공간을 아끼면서도, 열었을 때 플랫폼별 상세 내용을 탭으로 비교할 수 있습니다.

          작성 문법

          :::::zippy[환경별 확인]
          공통 안내 문장을 먼저 작성합니다.
          ::::tabs
          :::tab[A]
          A 환경 내용
          ```bash
          command --option
          ```
          :::
          :::tab[B]
          B 환경 내용
          ```bash
          command --option
          ```
          :::
          ::::
          :::::

          렌더링

          Lorem ipsum dolor sit amet

          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 봄이 오면 꽃이 피고, 여름에는 나무가 무성합니다. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.