문서

문서 단계

공유 문서 단계와 실용적인 예제입니다.

설치 순서

Create a project
Start from a Vite project when you do not have an app yet.
```
npm create vite@latest my-appcd my-app
```
Add Master CSS
Run the installer from the project root.
```
npm create @master/css@rc -- --yes
```
Run and style
Start the dev server, then use Master CSS classes in your markup.
```
npm run dev
```

사용법과 인터페이스

작성한 제목과 코드가 있는 설정 순서에는 StepSection을 사용하세요. 목록은 각 Step의 제목 옆에 단순한 표 형식 숫자 01, 02, 03과 가는 연결선으로 번호를 표시합니다. 숫자를 원이나 배지로 감싸지 마세요. 동작은 제목에, 예상 결과는 본문에 쓰며 읽기 순서는 문서에 유지하세요.

import Code from '@master/internal-site/components/Code'import StepSection, { Step, StepL, StepR } from '@master/internal-site/components/StepSection'<StepSection>  <Step $row>    <StepL>      <h3>Connect the stylesheet</h3>      <p>Import the entry in your app.</p>    </StepL>    <StepR>      <Code lang="css">{"@import '@master/css';"}</Code>    </StepR>  </Step></StepSection>

컴포넌트는 서버에서 렌더링됩니다. 적절한 단계의 네이티브 제목을 제공하고 안정적인 ID를 유지하세요. 번호는 장식이며 제목이나 진행 표시를 대신하지 않습니다. 번호 레일과 선택적 열은 Guide와 같은 표현을 사용합니다. 46rem 컨테이너 임계값이 선택적 2열 레이아웃을 제어하며 좁으면 읽기 순서로 쌓이고 코드는 자체 가로 스크롤을 유지합니다. 미리보기는 그 결과를 보여 주는 단계와 함께 두세요. 트레이가 미리보기와 소스 사이의 간격을 담당합니다.

설치 전반에 같은 순서 패턴을 사용하세요.

빠른 시작, Vite, CLI, VS Code는 각 동작과 결과를 짝지어 보여 줍니다.
Webpack, Rspack, Rsbuild는 전체 설정 파일을 읽을 수 있게 유지합니다.
Astro와 SvelteKit는 레이아웃과 서버 훅을 연결합니다.
Express, PHP, Rails는 따로 빌드한 에셋을 전체 서버 템플릿에 연결합니다.
Laravel, WordPress, Shopify는 호스트의 에셋 도우미와 레이아웃 훅을 유지합니다.
ASP.NET Core와 Blazor는 에셋 빌드, 호스트 빌드, 게시 순서를 명시합니다.

전체 템플릿과 외형 미리보기를 하나의 트레이에 함께 두세요. DemoConfiguredExample은 리터럴 소스로 표시된 class와 렌더링된 예제를 일치시킵니다. 미리보기는 호스트 프레임워크를 실행하지 않으므로 설정 제약은 학습 내용에 남겨 두세요.

설치는 Integrations, CDN, CLI를 한 글 안의 섹션으로 제시합니다. 일반 링크로 각 섹션 앵커에 연결하세요. 프레임워크 Guide는 자체 페이지 목차가 있는 별도 페이지로 유지하고 렌더링 모드는 각 프레임워크 Guide의 섹션으로 둡니다.

설치 순서

Create a project

Add Master CSS

Run and style

사용법과 인터페이스

#설치 탐색