Newtil CSS

Appearance

시작하기 ​

NewTil CSS를 프로젝트에 통합하는 방법을 알아보세요.

설치 ​

npm을 사용한 설치 ​

bash
npm install newtil-css

yarn을 사용한 설치 ​

bash
yarn add newtil-css

pnpm을 사용한 설치 ​

bash
pnpm add newtil-css

사용 방법 ​

방법 1: CSS 파일 직접 링크 ​

가장 간단한 방법은 컴파일된 CSS 파일을 직접 링크하는 것입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NewTil CSS 예제</title>
  <link rel="stylesheet" href="node_modules/newtil-css/dist/style.css">
</head>
<body>
  <!-- 컨텐츠 -->
</body>
</html>

방법 2: ES Module로 import ​

모듈 번들러(Webpack, Vite, Rollup 등)를 사용하는 경우:

javascript
// 전체 스타일 가져오기
import 'newtil-css/dist/style.css'

// 또는 개별로 가져오기
import 'newtil-css/dist/components.css'
import 'newtil-css/dist/utils.css'

방법 3: CDN 사용 ​

npm을 사용하지 않는 경우 CDN을 통해 사용할 수 있습니다:

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

방법 4: PostCSS로 직접 빌드 ​

소스 파일을 직접 빌드하여 사용할 수 있습니다:

javascript
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
  }
}
css
/* style.css */
@import 'newtil-css/css/style.css';

첫 번째 예제 ​

간단한 버튼 컴포넌트를 만들어보세요:

html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NewTil CSS 첫 예제</title>
  <link rel="stylesheet" href="node_modules/newtil-css/dist/style.css">
</head>
<body>
  <div class="p:4">
    <h1>NewTil CSS 첫 예제</h1>
    <div class="d:flex gap:2 mt:4">
      <button class="n-btn btn-size:2 btn-color:main">메인 버튼</button>
      <button class="n-btn btn-size:2 btn-color:sub">서브 버튼</button>
      <button class="n-btn btn-size:2 n-btn:outline">아웃라인 버튼</button>
    </div>
  </div>
</body>
</html>

다음 단계 ​

Copyright © 2024 newlecture