CSS 기본 지식을잃지 않는 프레임워크

표준 CSS 속성명을 그대로 사용하고, Material 3 컴포넌트를 제공하는 현대적이면서도 자유로운 CSS 프레임워크

웹과 앱 모두에서 사용할 수 있는 컴포넌트 중심의 개발 경험

<!-- 표준 CSS 속성명 그대로 사용 -->
<div class="display-flex 
            flex-direction-column 
            align-items-center 
            border-radius-2xl 
            padding-32 
            background-color-white 
            box-shadow-xl">
  <h2 class="font-size-3xl 
             font-weight-bold 
             color-gray-900 
             margin-bottom-16">
    newtil-css
  </h2>
  <p class="color-gray-600 margin-bottom-24">
    CSS 기본 지식을 잃지 않는 프레임워크
  </p>
  <button class="m3-button m3-button-filled 
                 padding-x-24 padding-y-12">
    시작하기
  </button>
</div>

왜 newtil-css인가?

CSS 기본 지식을 잃지 않으면서도, 빠르고 현대적인 UI를 구축할 수 있는 새로운 접근 방식

Material 3 컴포넌트와 CSS 속성명을 그대로 사용하는 유틸리티의 완벽한 조합

📚

CSS 속성명 그대로 사용

`display: flex`는 `display-flex`, `background-color`는 `background-color` 그대로. CSS 기본 지식을 잃지 않고, 표준 CSS 속성명을 그대로 사용할 수 있습니다.

🎨

Material 3 완벽 지원

Material Design 3를 완벽히 구현한 스타일 컴포넌트를 제공합니다. 웹과 앱 모두에서 일관된 디자인 시스템을 구축할 수 있습니다.

🧩

컴포넌트 중심 개발

완성된 컴포넌트를 기본으로 사용하고, 약간의 커스터마이징이 필요할 때만 유틸리티를 활용합니다. 빠르고 효율적인 개발이 가능합니다.

🔓

종속성 없는 자유

CSS 기본 지식을 유지하면서 개발하므로, 프레임워크에 종속되지 않습니다. 언제든지 순수 CSS로 전환할 수 있는 자유를 제공합니다.

🌐

웹과 앱 모두 지원

Material 3 기반의 컴포넌트로 웹 애플리케이션과 모바일 앱 모두에서 동일한 디자인 시스템을 적용할 수 있습니다.

🚀

학습 곡선 최소화

표준 CSS 속성명을 사용하므로 기존 CSS 지식이 그대로 활용됩니다. 새로운 문법을 외울 필요 없이 바로 시작할 수 있습니다.

모든 기능 보기 →

사용 예제

HTML에서 직접 클래스를 조합하여 어떤 디자인이든 구현할 수 있습니다.

반응형 그리드

<div class="grid grid-cols-1 
     md:grid-cols-2 
     lg:grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">1</div>
  <div class="bg-blue-500 p-4">2</div>
  <div class="bg-blue-500 p-4">3</div>
</div>

버튼 스타일링

<button class="px-6 py-3 
        bg-blue-600 
        text-white 
        rounded-lg 
        hover:bg-blue-700 
        transition-colors">
  클릭하세요
</button>

카드 컴포넌트

<div class="bg-white 
     dark:bg-gray-800 
     rounded-xl 
     p-6 
     shadow-lg">
  <h3 class="text-xl font-bold mb-2">제목</h3>
  <p class="text-gray-600">내용</p>
</div>

제목

내용

Flexbox 레이아웃

<div class="flex items-center 
     justify-between 
     gap-4">
  <div>왼쪽</div>
  <div>오른쪽</div>
</div>

왼쪽

오른쪽

더 많은 예제 보기 →

설치 방법

몇 가지 간단한 단계로 시작할 수 있습니다.

1. npm으로 설치

npm install newtil-css

2. CDN으로 사용

<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/newtil-css@latest/dist/newtil.css"
/>

3. 사용하기

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" 
        href="https://cdn.jsdelivr.net/npm/newtil-css@latest/dist/newtil.css">
</head>
<body>
  <div class="flex items-center justify-center min-h-screen">
    <h1 class="text-4xl font-bold text-blue-600">
      Hello, newtil-css!
    </h1>
  </div>
</body>
</html>

상세 설치 가이드 보기 →