시작하기

Master CSS 입문

클래스로 인터페이스를 만들고 생성 CSS를 따라가며 프로젝트에서 공유할 값을 정의하세요.

이 페이지의 내용

Master CSS는 마크업에서 인터페이스 스타일을 지정하고 CSS에서 공통 스타일을 정의하는 CSS 프레임워크입니다. 요소를 만드는 곳에 클래스를 작성하고, 프로젝트 전체에서 공유할 값과 패턴은 스타일시트에 두세요. Master가 해당 클래스에 필요한 CSS를 생성합니다.

제공되는 색상, 간격, 타이포그래피부터 사용할 수 있습니다. 첫 컴포넌트를 만들기 전에 완전한 테마를 설계할 필요는 없습니다.

#CSS와 유틸리티로 인터페이스 만들기

이 카드는 네이티브 컴포넌트 클래스와 유틸리티를 조합합니다. .action은 CSS에서 버튼의 기본 스타일을 정의합니다. w-full, mt-md, bg-blue-60은 이 카드에 필요한 너비, 바깥 여백, 색상을 지정합니다. 나머지 마크업은 프리셋 유틸리티로 레이아웃, 간격, 타이포그래피를 구성합니다.

설치를 마쳤다면 앱 스타일시트의 프리셋 가져오기 뒤에 예제의 CSS를 추가하고, 통합 도구가 스캔하는 소스 파일에 HTML을 넣으세요.

app.css

@import '@master/css';

CSS와 유틸리티로 만든 카드

@layer components {  .action {    display: flex;    align-items: center;    justify-content: center;    min-height: 2.75rem;    padding: var(--spacing-xs) var(--spacing-md);    border-radius: var(--radius-md);    font-size: var(--text-sm);    font-weight: var(--font-weight-regular);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal);    text-decoration-line: none;    outline-offset: 3px;    &:focus-visible {      outline: 2px solid;    }  }}

<article class="overflow-hidden w-full (max-width:22.5rem) mx-auto r-lg bg-surface-raised shadow-sm">  <img src="/building.jpg" width="640" height="360" alt="Sunlit facade of a contemporary building" class="block w-full h-auto (aspect-ratio:16/9) object-cover">  <div class="p-lg">    <p class="m(0) text-2xs font-regular tracking-widest uppercase fg-text-blue">Launch panel</p>    <h2 class="mt-xs mb(0) text-md font-regular fg-text-strong">Build the first screen in markup</h2>    <p class="mt-xs mb(0) text-sm leading-lg fg-text-muted">Start with local classes, then promote repeated values into your project theme when the interface settles.</p>    <a class="action w-full mt-md bg-blue-60 fg-white bg-blue-70:hover bg-blue-80:active outline-blue-60:focus-visible" href="/guide/installation" target="_top">Start building</a>  </div></article>

생성된 CSS

@layer components {  .action {    min-height: 2.75rem;    padding: var(--spacing-xs) var(--spacing-md);    border-radius: var(--radius-md);    font-size: var(--text-sm);    font-weight: var(--font-weight-regular);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal);    outline-offset: 3px;    justify-content: center;    align-items: center;    text-decoration-line: none;    display: flex;    &:focus-visible {      outline: 2px solid;    }  }}@layer theme {  :root,  :host {    --color-zinc-40: oklch(68.6% .0028 265);    --color-zinc-60: oklch(48.6% .003 265);    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-30: oklch(72.87% .1468 249.3);    --color-blue-60: oklch(51.83% .2687 266.1);    --color-blue-70: oklch(46.26% .3057 266.7);    --color-blue-80: oklch(42.89% .2907 266.3)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white));    --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40));    --color-text-blue: light-dark(var(--color-blue-60), var(--color-blue-30))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --tracking-widest: .12em;    --leading-lg: 1.8;    --font-weight-regular: 400;    --font-size-2xs: .625rem;    --font-size-sm: .875rem;    --font-size-md: 1rem;    --text-2xs: var(--font-size-2xs);    --text-2xs--line-height: 1.5;    --text-2xs--letter-spacing: 0;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-md: var(--font-size-md);    --text-md--line-height: 1.6;    --text-md--letter-spacing: 0;    --radius-md: .375rem;    --radius-lg: .5rem;    --spacing-xs: .5rem;    --spacing-md: 1rem;    --spacing-lg: 1.5rem  }  :root,  :host {    --shadow-sm: 0 0 0 1px light-dark(oklch(0% 0 none / .04), oklch(100% 0 none / .05)), 0 1px 1px -.5px light-dark(oklch(0% 0 none / .045), oklch(0% 0 none / .3)), 0 2px 2px -1px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .26)), 0 4px 4px -2px light-dark(oklch(0% 0 none / .04), oklch(0% 0 none / .24))  }}@layer utilities {  .text-2xs {    font-size: var(--text-2xs);    line-height: var(--text-2xs--line-height, normal);    letter-spacing: var(--text-2xs--letter-spacing, normal)  }  .text-md {    font-size: var(--text-md);    line-height: var(--text-md--line-height, normal);    letter-spacing: var(--text-md--letter-spacing, normal)  }  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-blue-60 {    background-color: var(--color-blue-60)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .r-lg {    border-radius: var(--radius-lg)  }  .shadow-sm {    box-shadow: var(--shadow-sm)  }  .fg-text-blue {    color: var(--color-text-blue)  }  .fg-text-muted {    color: var(--color-text-muted)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .fg-white {    color: var(--color-white)  }  .block {    display: block  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .h-auto {    height: auto  }  .tracking-widest {    letter-spacing: var(--tracking-widest)  }  .leading-lg {    line-height: var(--leading-lg)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .mt-md {    margin-top: var(--spacing-md)  }  .mt-xs {    margin-top: var(--spacing-xs)  }  .mb\(0\) {    margin-bottom: calc(0 * 1px)  }  .object-cover {    object-fit: cover  }  .overflow-hidden {    overflow: hidden  }  .p-lg {    padding: var(--spacing-lg)  }  .uppercase {    text-transform: uppercase  }  .w-full {    width: 100%  }  .\(aspect-ratio\:16\/9\) {    aspect-ratio: 16/9  }  .\(max-width\:22\.5rem\) {    max-width: 22.5rem  }  .bg-blue-70\:hover:hover {    background-color: var(--color-blue-70)  }  .outline-blue-60\:focus-visible:focus-visible {    outline-color: var(--color-blue-60)  }  .bg-blue-80\:active:active {    background-color: var(--color-blue-80)  }}

action 클래스는 버튼의 기본 스타일을 정의합니다. 유틸리티는 이 인스턴스의 너비, 바깥 여백, 파란색을 지정합니다. 링크에 포인터를 올리거나 포커스를 옮겨 상호작용 상태를 확인하세요.

미리보기는 표시된 CSS와 HTML을 함께 사용합니다. 이 예제는 @layer components 안에 .action을 정의하고, Master는 마크업의 클래스에서 유틸리티 규칙을 생성합니다. 버튼의 공통 형태와 포커스 표시는 .action에 두고, 이 인스턴스의 파란색과 전체 너비 지정은 마크업에 남기세요.

p-lg를 p-md로 바꿔 보세요. 버튼의 기본 스타일은 유지하면서 카드 콘텐츠의 패딩이 줄어듭니다.

이미지 URL은 앱이 /building.jpg를 제공한다고 가정합니다. 자신의 이미지와 대체 텍스트로 바꾸고, 링크도 앱 안의 페이지를 가리키도록 변경하세요.

#클래스에서 CSS까지 따라가기

카드의 p-lg를 살펴보세요. 프리셋은 p-를 패딩에, lg를 간격 토큰 --spacing-lg에 연결합니다. Master는 선언에서 이 CSS 변수를 참조하는 클래스 선택자를 생성합니다.

생성된 CSS

@layer theme {  :root,  :host {    --spacing-lg: 1.5rem  }}@layer utilities {  .p-lg {    padding: var(--spacing-lg)  }}

브라우저는 일치하는 요소에 padding: var(--spacing-lg)를 적용합니다. 프리셋 값에 따르면 네 방향 모두 1.5rem입니다. 테마에서 공유 값을 변경해도 클래스 이름은 그대로입니다.

다른 클래스는 다른 종류의 결정을 표현합니다. w-full은 width: 100%를 지정하는 고정 유틸리티이고, bg-blue-70:hover는 호버 상태를 추가합니다. 구문 튜토리얼은 동작하는 예제로 값, 선택자, 조건을 설명합니다.

#함께 바뀌어야 할 값 정의하기

여러 요소가 프로젝트의 한 설정을 공유해야 한다면 테마 토큰을 추가하세요. 주요 동작의 색상을 지정하려면 앱 스타일시트의 가져오기 뒤에 --color-brand를 정의하고, 마크업에서 bg-brand를 사용합니다.

@theme {  --color-brand: #2563eb;}

<a class="inline-flex px-md py-xs r-md bg-brand fg-white" href="/guide/installation">Start building</a>

생성된 CSS

@layer theme {  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --radius-md: .375rem;    --spacing-xs: .5rem;    --spacing-md: 1rem  }  :root,  :host {    --color-brand: #2563eb  }}@layer utilities {  .bg-brand {    background-color: var(--color-brand)  }  .r-md {    border-radius: var(--radius-md)  }  .fg-white {    color: var(--color-white)  }  .inline-flex {    display: inline-flex  }  .py-xs {    padding-block: var(--spacing-xs)  }  .px-md {    padding-inline: var(--spacing-md)  }}

--color-brand를 변경하면 이를 사용하는 요소가 갱신됩니다. 해당 요소들이 함께 바뀌어야 할 때 토큰을 공유하세요. 서로 무관한 두 색상은 값이 같더라도 같은 이름을 사용할 필요가 없습니다. 공유 값을 정의하고 재정의하는 방법은 테마 토큰에서 설명합니다.

여러 요소가 스타일 규약을 공유해야 한다면 .action 같은 컴포넌트 클래스를 사용하고, 마크업을 공유해야 한다면 UI 컴포넌트를 사용하세요. 클래스 목록이 길다는 이유만으로 새 CSS 이름을 만들 필요는 없습니다. 스타일 재사용은 공통 토큰, 컴포넌트 클래스, 사용자 지정 유틸리티를 선택하는 기준을 설명합니다.

#정적 CSS로 시작하기

프레임워크에 권장되는 정적 통합을 사용하세요. 빌드 시점에 소스에서 완전한 클래스 이름을 찾아 일반 CSS를 전달하므로, 브라우저에 Master 런타임이나 엔진이 필요하지 않습니다.

상호작용이 있는 인터페이스도 그대로 만들 수 있습니다. 알려진 클래스 사이를 전환하거나, :hover 같은 선택자를 사용하거나, CSS 사용자 지정 속성으로 진행률과 좌표 같은 값을 갱신하세요. 플레이그라운드, 시각적 편집기, 배포된 콘텐츠가 이전에 알 수 없던 클래스 이름을 추가한다면 런타임이 유용합니다. 렌더링 모드에서 전달 방식의 선택 기준을 설명합니다.

설치에 따라 Master CSS를 앱에 연결한 뒤, 구문 튜토리얼에서 상호작용 상태와 반응형 조건을 갖춘 카드를 만들어 보세요. 작성 중 자동 완성과 진단을 사용하려면 언어 서비스를 설정하세요.