구성 요소

참고 상자

각 참고 상자 유형은 기본 제목과 함께 ::: 펜스 구문을 사용합니다.

참고

이것은 노트 참고 상자입니다. 독자가 알아야 할 보충 정보에 주의를 끕니다.

팁

이것은 팁 참고 상자입니다. 모범 사례나 유용한 단축키를 강조합니다.

주의

이것은 주의 참고 상자입니다. 잠재적인 함정이나 명확하지 않은 동작에 대해 경고합니다.

위험

이것은 위험 참고 상자입니다. 파괴적이거나 되돌릴 수 없는 작업을 표시합니다.

사용자 지정 제목

Custom Note Title

이 참고 상자는 사용자 지정 제목 재정의가 포함된 <Aside> 구성 요소를 사용합니다.

Pro Tip

참고 상자 구성 요소 내부에 볼드, 이탤릭, 인라인 코드를 중첩할 수 있습니다.

Watch Out

의존성을 업그레이드할 때 주의하세요 — 먼저 변경 로그를 확인하세요.

Destructive Action

git reset --hard를 실행하면 커밋되지 않은 변경 사항이 영구적으로 삭제됩니다.

참고 상자 내 다양한 콘텐츠

혼합 콘텐츠가 있는 참고 상자

다음은 참고 상자 내부의 코드 블록입니다:

npm install @astrojs/starlight

항목 목록:

• 볼드 텍스트가 있는 첫 번째 항목
• 인라인 코드가 있는 두 번째 항목
• Starlight 문서 링크가 있는 세 번째 항목

참고 상자 CSS

Starlight의 내장 참고 상자 구성 요소는 둥근 모서리와 레이어드 그림자를 갖습니다:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

탭

기본 탭

Overview

이것은 개요 탭 콘텐츠입니다. 기본 탭 렌더링을 확인하기 위한 일반 텍스트가 포함되어 있습니다.

Details

이것은 세부 정보 탭입니다. 탭 간 전환은 페이지 새로고침 없이 즉시 이루어져야 합니다.

혼합 콘텐츠가 있는 탭

Text

첫 번째 탭의 일반 단락 콘텐츠입니다.

Code

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

List

• 탭 내부의 항목 1
• 볼드 텍스트가 있는 항목 2
• 인라인 코드가 있는 항목 3

동기화된 탭

이 두 탭 그룹은 syncKey="pkg"를 공유합니다. 한 그룹에서 탭을 선택하면 다른 그룹도 업데이트됩니다.

설치 명령어:

npm

npm install @f5-sales-demo/docs-theme

pnpm

pnpm add @f5-sales-demo/docs-theme

yarn

yarn add @f5-sales-demo/docs-theme

실행 명령어:

npm

npm run dev

pnpm

pnpm dev

yarn

yarn dev

단계

1. 저장소 복제

   git clone https://github.com/example/repo.git
   cd repo

2. 의존성 설치

   npm install

3. 개발 서버 시작

   npm run dev

   사이트는 http://localhost:4321에서 접근할 수 있습니다.

카드

단일 카드

Single Card

이것은 아이콘이 있는 독립형 카드입니다. 카드는 주요 정보나 기능을 강조하는 데 유용합니다.

카드 그리드

Performance

Astro는 빠른 페이지 로드를 위해 기본적으로 제로 JS를 제공합니다.

Customizable

Starlight는 광범위한 테마 및 플러그인 옵션을 제공합니다.

Accessible

내장 접근성 기능으로 모든 사용자가 콘텐츠에 접근할 수 있습니다.

Documented

포괄적인 문서화로 시작이 간편합니다.

스태거 레이아웃

Step One

프로젝트 설정과 환경 변수를 구성하세요.

Step Two

MDX 형식을 사용하여 콘텐츠 페이지를 만드세요.

Step Three

개발 서버로 로컬에서 미리보기하세요.

Step Four

원하는 호스팅 플랫폼에 배포하세요.

링크 카드

테마는 아이콘 유무에 관계없이 작동하는 LinkCard 구성 요소를 제공합니다. 테마에서 가져오세요:

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight DocumentationLearn how to build documentation sites with Starlight.

Astro DocumentationExplore the Astro framework for content-driven websites.

아이콘 포함

prefix:name 구문을 사용하여 icon prop을 추가하세요. 8개의 아이콘 패키지가 모두 지원됩니다 — 전체 카탈로그는 아이콘 패키지 문서를 참조하세요.

Lucide (lucide:)

Web App FirewallFirewall policies and configuration.

Multi-Cloud NetworkingSite connectivity across clouds.

Carbon (carbon:)

Security ServicesIBM Carbon security icon set.

Cloud ServicesIBM Carbon cloud icon set.

Material Design Icons (mdi:)

Access ControlMaterial Design shield lock icon.

Data ManagementMaterial Design database icon.

Phosphor (phosphor:)

Threat DefensePhosphor shield icon.

Global NetworkPhosphor globe icon.

Tabler (tabler:)

Cloud PlatformTabler cloud icon.

DeploymentTabler rocket icon.

F5 Brand (f5-brand:)

Cloud SecurityF5 branded cloud shield icon.

FirewallF5 branded firewall icon.

F5 Distributed Cloud (f5xc:)

이 아이콘들은 다중 색상이며 라이트/다크 모드 색상 적응을 위해 CSS 사용자 지정 속성을 사용합니다.

App & API ProtectionF5 XC web app and API protection icon.

Bot DefenseF5 XC bot defense icon.

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform icon.

ConsulHashiCorp Consul icon.

배지

인라인 배지 변형

인라인으로 렌더링된 6가지 배지 변형 모두:

Default Note Danger Success Tip Caution

배지 크기

Small Medium Large

변형이 있는 각 크기:

Small Tip Medium Danger Large Success

제목 배지

다음 제목들은 starlight-heading-badges 플러그인 구문을 사용합니다.

기능 완료 Stable

이 제목에는 기능이 안정적임을 나타내는 성공 배지가 있습니다.

실험적 API Beta

이 제목에는 API가 실험적임을 나타내는 주의 배지가 있습니다.

레거시 시스템 Deprecated

이 제목에는 지원 중단을 나타내는 위험 배지가 있습니다.

새 기능 New

이 제목에는 새 기능을 나타내는 팁 배지가 있습니다.

문서화 Updated

이 제목에는 최근 업데이트를 나타내는 노트 배지가 있습니다.

기본 배지 Info

이 제목에는 변형이 지정되지 않은 기본 배지가 있습니다.

사이드바 배지

사이드바를 확인하세요: 이 페이지에는 프론트매터를 통해 적용된 tip 변형의 “New” 배지가 있습니다.

표

간단한 표

기능	상태	우선순위
다크 모드	지원됨	높음
이미지 확대	지원됨	중간
Mermaid 다이어그램	지원됨	중간
제목 배지	지원됨	낮음

정렬 및 코드가 있는 표

속성	유형	기본값	설명
title	string	—	헤더에 표시되는 페이지 제목
description	string	""	SEO를 위한 메타 설명
sidebar.order	number	0	사이드바의 정렬 순서
sidebar.badge	object	null	사이드바 레이블 옆에 표시되는 배지
template	"doc" | "splash"	"doc"	페이지 레이아웃 템플릿

이미지

아래 이미지는 starlight-image-zoom 플러그인을 테스트합니다. 클릭하여 확대하세요.

파일 트리

• 디렉터리src/

  • 디렉터리content/

    • 디렉터리docs/

      • index.mdx
      • 01-environment-variables.mdx
      • 02-build-pipeline.mdx
      • 03-astro-config.mdx
      • 04-logo.mdx
      • 05-colors.mdx
      • 07-typography.mdx
      • 08-code-blocks.mdx
      • 09-components.mdx 이 페이지
      • 10-mermaid.mdx
      • 11-footer.mdx
      • 12-style-enhancement-guide.mdx
  • 디렉터리plugins/

    • remark-mermaid.mjs
• 디렉터리styles/

  • custom.css
• astro.config.mjs
• package.json

테마 확인

• 테두리 왼쪽 색상이 참고 상자 변형마다 다름 (파란색, 보라색, 노란색, 빨간색)
• 참고 상자 배경 색조가 라이트 및 다크 모드 모두에서 보임
• 박스 그림자가 각 참고 상자 주변에 미묘하지만 보임
• 모든 참고 상자에 둥근 모서리 (0.75rem) 적용
• 탭 활성 표시기 색상이 액센트 색상을 사용
• 번호가 매겨진 단계 사이에 단계 연결선이 보임
• 그룹 간 전환 시 동기화된 탭이 동기화 상태 유지
• 탭 내부의 코드 블록이 적절한 구문 강조 표시로 렌더링됨
• 카드 테두리 색상이 라이트 및 다크 모드 간 적응
• 카드에 호버 배경 효과가 보임
• LinkCard 화살표 아이콘 색상이 액센트 색상과 일치
• 스태거 레이아웃이 교대로 카드를 수직으로 오프셋
• 카드 헤더 내부에 아이콘이 올바르게 렌더링됨
• 배지 배경 색상이 변형에 따라 다크 모드와 라이트 모드에서 다름
• 다크 모드 배지는 짙은 톤 사용 (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
• 라이트 모드 배지는 밝은 톤 사용 (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
• 제목 배지가 제목 텍스트와 인라인으로 정렬됨
• 사이드바 배지가 페이지 레이블 옆에 렌더링됨
• 표 테두리 색상이 라이트 및 다크 모드 간 적응
• 표 헤더 행이 명확한 배경을 가짐
• 이미지 확대 오버레이가 클릭 시 작동 (starlight-image-zoom)
• FileTree 배경이 테마에 적합한 색상 사용
• 아이콘이 현재 텍스트 색상을 상속함