컴포넌트 시작하기

NewTil CSS의 컴포넌트 사용법을 배워보세요.

컴포넌트란?

NewTil CSS의 컴포넌트는 재사용 가능한 UI 요소입니다. n- 접두사를 사용하여 다른 CSS 프레임워크와의 충돌을 방지합니다.

기본 사용법

모든 컴포넌트는 기본 클래스를 적용하면 사용할 수 있습니다.

버튼 컴포넌트

<button class="n-btn">버튼</button>

리스트 컴포넌트

<ul class="n-list">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

컴포넌트 변형 (Variants)

대부분의 컴포넌트는 다양한 변형을 지원합니다.

버튼 타입

<!-- Filled 버튼 (기본) -->
<button class="n-btn">Filled</button>

<!-- Outline 버튼 -->
<button class="n-btn n-btn:outline">Outline</button>

<!-- Void 버튼 -->
<button class="n-btn n-btn:void">Void</button>

버튼 사이즈

<button class="n-btn btn-size:1">Small</button>
<button class="n-btn btn-size:2">Medium</button>
<button class="n-btn btn-size:3">Large</button>

버튼 색상

<button class="n-btn btn-color:main">Main</button>
<button class="n-btn btn-color:sub">Sub</button>
<button class="n-btn btn-color:accent">Accent</button>
<button class="n-btn btn-color:base">Base</button>

컴포넌트 조합

여러 클래스를 조합하여 원하는 스타일을 만들 수 있습니다.

<button class="n-btn btn-size:3 btn-color:main n-btn:outline">
  큰 아웃라인 메인 버튼
</button>

커스터마이징

컴포넌트 스타일은 CSS 변수를 통해 커스터마이징할 수 있습니다.

:root {
  /* 버튼 높이 조정 */
  --btn-height-2: 40px;
  
  /* 버튼 색상 변경 */
  --btn-filled-background-color-default: #3182ce;
  --btn-filled-color: #ffffff;
}

더 자세한 커스터마이징 방법은 테마 커스터마이징을 참조하세요.

사용 가능한 컴포넌트

• Button - 버튼 컴포넌트
• List - 리스트 컴포넌트
• Modal - 모달 다이얼로그
• Drawer - 사이드 드로어
• Form - 폼 요소들
• Table - 테이블 컴포넌트
• Panel - 패널 컴포넌트
• Container - 컨테이너 컴포넌트

전체 컴포넌트 목록은 컴포넌트 문서에서 확인하실 수 있습니다.