Newtil CSS는 간편한 웹 문서 스타일링을 지원하기 위해 다양한 컴포넌트를 제공합니다.
이 컴포넌트들을 사용하면 button, list, form, table 등 다양한 컨텐츠를 빠르고 간편하게 스타일링할 수 있습니다.
::: raw
:::
▲ 위 컴포넌트를 클릭하여 자세한 사용법을 알아보세요!
::: info
컴포넌트는 자주 사용되는 요소를 중심으로 제공하고 있으며, 점차적으로 추가될 예정입니다.
추가 아이디어가 있다면 깃허브를 통해 이슈로 제출해 주시기 바랍니다. :::
Newtil CSS는 n-컴포넌트명 클래스를 통해 간편하게 사용할 수 있습니다.
<button class="n-btn">Button</button>
다음으로 List 컴포넌트의 활용 예시를 살펴보겠습니다.
<ul class="n-list">
<li>Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit</li>
<li>Morbi sed facilisis augue</li>
</ul>
::: raw
:::
아래와 같이 클래스를 추가 작성하여 레이아웃 혹은 스타일을 손쉽게 변경할 수 있습니다.
<ul class="n-list n-tile-list">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<!-- ... -->
</ul>
::: raw
:::
컴포넌트를 커스터마이징하는 방법에는 두 가지가 있습니다.
Newtil CSS가 제공하는 유틸리티 클래스를 통해 쉽고 빠르게 컴포넌트를 커스터마이징할 수 있습니다.
유틸리티 클래스를 활용하여 진행도를 표현하는 Progress 컴포넌트의 background-color, border-radius, height 속성값을 변경해보겠습니다.
기본 스타일
<div class="n-progress w:5p" role="progressbar">
<div style="width: 25%"></div>
</div>
커스텀 스타일
<div
class="n-progress w:5p bg-color:base-1 bd-radius:0 h:1"
role="progressbar">
<div style="width: 25%"></div>
</div>
<Link :text=”‘유틸리티 클래스 자세하게 알아보기’” :link=”’./getting-started-utility’” />
컴포넌트의 기본 스타일을 정의하고 있는 변수값을 조정하여 컴포넌트를 커스터마이징할 수 있습니다.
컴포넌트의 스타일은 전역적으로 변경하거나 지역적으로 변경할 수 있습니다.
기본 스타일
.n-progress {
--progress-height: 6px;
--progress-border-radius: 999px;
--progress-background-color: rgba(var(--rgb-base-6), 0.2);
}
커스텀 스타일
/* root.css */
.n-progress {
--progress-height: 50px;
--progress-border-radius: 0px;
--progress-background-color: rgb(var(--rgb-base-1));
}
컴포넌트의 스타일을 전역적으로 변경하려면 해당 컴포넌트의 클래스명을 선택자로 지정하여 스타일을 재정의합니다.
/* MyProgressPage.css */
.my-progress .n-progress {
--progress-height: 50px;
--progress-border-radius: 0px;
--progress-background-color: rgb(var(--rgb-base-1));
}
특정 영역 내의 컴포넌트의 스타일을 변경하려면 해당 컴포넌트의 상위 요소를 선택자로 지정하여 스타일을 재정의합니다.
<Link :text=”‘CSS 변수 자세하게 알아보기’” :link=”’./css-variable-list’” />
::: info 컴포넌트의 오버라이딩이 가능한 변수는 부분적으로 제공하고 있습니다.
추가 아이디어가 있다면 깃허브를 통해 이슈로 제출해 주시기 바랍니다. :::