---
## ✨ 주요 특징
### 🎨 Material 3 Design 100% 지원하는 컴포넌트
Google의 Material Design 3 가이드라인을 완벽하게 반영한 컴포넌트를 제공합니다. 모든 디자인 원칙, 상호작용 패턴, 접근성 가이드라인을 정확히 구현합니다.
### 🎯 순수 CSS와 100% 동일한 명명 규칙
CSS 속성을 그대로 클래스명으로 사용하여 학습 곡선을 최소화합니다.
```html
...
...
```
위 예제에서 아래 클래스 표현(`d:flex jc:center`)은 위의 인라인 스타일(`display: flex; justify-content: center;`)의 축약 표현입니다.
### 🎨 Google Icons 완벽 지원
Google Material Icons를 간편하게 사용할 수 있습니다.
```html
homemenu
```
### 🚨 버튼 컴포넌트 예제
아래는 Newtil CSS 버튼 컴포넌트를 사용하는 간단한 예제입니다.
```html
```
> 다양한 버튼 스타일과 상태를 `n-btn`, `btn:tonal`, `btn:outlined`, `btn-shape:round`, `btn-size:2` 등 클래스 조합으로 쉽게 구현할 수 있습니다.
### 🔧 CSS 변수 기반 컴포넌트
사용자 정의가 쉬운 유연한 컴포넌트 시스템을 제공합니다.
```css
.n-section {
--padding: var(--space-4);
--bd-radius: var(--space-3);
}
```
### 🌓 다크 모드 자동 지원
`prefers-color-scheme`을 통해 자동으로 다크 모드를 지원합니다.
### 📱 반응형 디자인
모바일부터 데스크톱까지 모든 화면 크기에 최적화되어 있습니다.
---
## 🚀 빠른 시작
### CDN으로 설치
```html
```
### npm으로 설치
```bash
npm install newtil-css
```
### 기본 사용법
```html
My App
Welcome
Newtil CSS로 빠르게 시작하세요!
```
---
## 📦 주요 컴포넌트
### Layout
```html
......
```
### Section
```html
제목
내용
```
**Section Types:**
- `section:card` - 경계선이 있는 카드 스타일
- `section:glass` - Glassmorphism 효과
- `section:elevated` - 그림자 효과
### List
```html
항목 1
항목 2
항목 3
```
### Button
```html
```
### Form
```html
```
---
## 🎨 유틸리티 클래스
### 레이아웃
```html
...
...
```
### 간격
```html
...
...
```
### 색상
```html
...
```
### 크기
```html
...
```
---
## 📚 문서
자세한 사용법과 예제는 [공식 문서](https://newlecture-corp.github.io/newtil-css/)를 참고하세요.
### 주요 문서
- [컴포넌트 가이드](https://newlecture-corp.github.io/newtil-css/components)
- [유틸리티 클래스](https://newlecture-corp.github.io/newtil-css/utilities)
- [커스터마이징](https://newlecture-corp.github.io/newtil-css/customization)
- [예제 모음](https://newlecture-corp.github.io/newtil-css/examples)
---
## 🤝 기여하기
기여는 언제나 환영합니다!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 📖 참고 자료
- [MDN Web Docs](https://developer.mozilla.org/) - CSS 레퍼런스
- [Google Material Icons](https://fonts.google.com/icons) - 아이콘 라이브러리
- [CSS Tricks](https://css-tricks.com/) - CSS 팁과 트릭
---
## 📄 라이선스
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참고하세요.
---
## 👨💻 제작자
**뉴렉처 (Newlecture)**
- Website: [https://www.newlecture.com](https://www.newlecture.com)
- GitHub: [@newlecture-corp](https://github.com/newlecture-corp)
---
