구성 요소

어사이드

각 어사이드 유형은 기본 제목과 함께 ::: 펜스 구문을 사용합니다.

참고

이것은 note 어사이드입니다. 독자가 알아야 할 보충 정보에 주의를 끕니다.

팁

이것은 tip 어사이드입니다. 모범 사례 또는 유용한 단축키를 강조합니다.

주의

이것은 caution 어사이드입니다. 잠재적인 함정이나 명확하지 않은 동작에 대해 경고합니다.

위험

이것은 danger 어사이드입니다. 파괴적이거나 되돌릴 수 없는 작업을 표시합니다.

사용자 정의 제목

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

• 탭 내부의 첫 번째 항목
• 볼드 텍스트가 있는 두 번째 항목
• 인라인 코드가 있는 세 번째 항목

동기화된 탭

이 두 탭 그룹은 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 DocumentationStarlight로 문서 사이트를 구축하는 방법을 알아보세요.

Astro Documentation콘텐츠 중심 웹사이트를 위한 Astro 프레임워크를 탐색하세요.

아이콘 포함

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

Lucide (lucide:)

Web App Firewall방화벽 정책 및 구성.

Multi-Cloud Networking클라우드 간 사이트 연결.

Carbon (carbon:)

Security ServicesIBM Carbon 보안 아이콘 세트.

Cloud ServicesIBM Carbon 클라우드 아이콘 세트.

Material Design Icons (mdi:)

Access ControlMaterial Design 방패 잠금 아이콘.

Data ManagementMaterial Design 데이터베이스 아이콘.

Phosphor (phosphor:)

Threat DefensePhosphor 방패 아이콘.

Global NetworkPhosphor 지구본 아이콘.

Tabler (tabler:)

Cloud PlatformTabler 클라우드 아이콘.

DeploymentTabler 로켓 아이콘.

F5 Brand (f5-brand:)

Cloud SecurityF5 브랜드 클라우드 방패 아이콘.

FirewallF5 브랜드 방화벽 아이콘.

F5 Distributed Cloud (f5xc:)

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

App & API ProtectionF5 XC 웹 앱 및 API 보호 아이콘.

Bot DefenseF5 XC 봇 방어 아이콘.

HashiCorp Flight (hashicorp-flight:)

TerraformHashiCorp Terraform 아이콘.

ConsulHashiCorp Consul 아이콘.

배지

인라인 배지 변형

6가지 배지 변형을 인라인으로 렌더링:

Default Note Danger Success Tip Caution

배지 크기

Small Medium Large

각 크기별 변형:

Small Tip Medium Danger Large Success

제목 배지

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

Feature Complete Stable

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

Experimental API Beta

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

Legacy System Deprecated

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

New Feature New

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

Documentation Updated

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

Default Badge 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 배경이 테마에 적합한 색상을 사용함
• 아이콘이 현재 텍스트 색상을 상속함