CSS 변수 목록
유틸리티와 컴포넌트에서 사용되는 CSS 변수 목록과 해당 변수들을 오버라이딩하는 방법을 설명합니다.
Overview
newtil-css에서 사용되는 모든 전역 변수는 다음을 확인하세요:
변수 목록
css
:root {
/* color */
--color-main-1: #99c842;
--color-main-2: #85b132;
--color-main-3: #759d2a;
--rgb-main-1: 153, 200, 66;
--rgb-main-2: 133, 177, 50;
--rgb-main-3: 117, 157, 42;
--color-sub-1: #339af0;
--color-sub-2: #228be6;
--color-sub-3: #1c7ed6;
--rgb-sub-1: 51, 154, 240;
--rgb-sub-2: 34, 139, 230;
--rgb-sub-3: 28, 126, 214;
--color-accent-1: #ff6b6b;
--color-accent-2: #fa5252;
--color-accent-3: #f03e3e;
--rgb-accent-1: 255, 107, 107;
--rgb-accent-2: 250, 82, 82;
--rgb-accent-3: 240, 62, 62;
--color-base-1: #ffffff;
--color-base-2: #e4e7ea;
--color-base-3: #dee2e6;
--color-base-4: #ced4da;
--color-base-5: #adb5bd;
--color-base-6: #868e96;
--color-base-7: #495057;
--color-base-8: #343a40;
--color-base-9: #1a1c20;
--color-base-10: #000000;
--rgb-base-1: 255, 255, 255;
--rgb-base-2: 228, 231, 234;
--rgb-base-3: 222, 226, 230;
--rgb-base-4: 206, 212, 218;
--rgb-base-5: 173, 181, 189;
--rgb-base-6: 134, 142, 150;
--rgb-base-7: 73, 80, 87;
--rgb-base-8: 52, 58, 64;
--rgb-base-9: 26, 28, 32;
--rgb-base-10: 0, 0, 0;
/* gap */
--gap-0: 0px;
--gap-1: 4px;
--gap-2: 8px;
--gap-3: 12px;
--gap-4: 16px;
--gap-5: 20px;
--gap-6: 24px;
--gap-7: 28px;
--gap-8: 32px;
--gap-9: 36px;
--gap-10: 40px;
--gap-full: 9999px;
/* width */
--width-0: 0px;
--width-1: 50px;
--width-2: 100px;
--width-3: 150px;
--width-4: 200px;
--width-5: 250px;
--width-6: 300px;
--width-7: 350px;
--width-8: 400px;
--width-9: 450px;
--width-10: 500px;
--width-percent-1: 10%;
--width-percent-2: 20%;
--width-percent-3: 30%;
--width-percent-4: 40%;
--width-percent-5: 50%;
--width-percent-6: 60%;
--width-percent-7: 70%;
--width-percent-8: 80%;
--width-percent-9: 90%;
--width-percent-10: 100%;
/* height */
--height-0: 0px;
--height-1: 50px;
--height-2: 100px;
--height-3: 150px;
--height-4: 200px;
--height-5: 250px;
--height-6: 300px;
--height-7: 350px;
--height-8: 400px;
--height-9: 450px;
--height-10: 500px;
--height-percent-1: 10%;
--height-percent-2: 20%;
--height-percent-3: 30%;
--height-percent-4: 40%;
--height-percent-5: 50%;
--height-percent-6: 60%;
--height-percent-7: 70%;
--height-percent-8: 80%;
--height-percent-9: 90%;
--height-percent-10: 100%;
/* border */
--border-color: var(--color-base-3);
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 3px;
--border-radius-0: 0;
--border-radius-1: 4px;
--border-radius-2: 8px;
--border-radius-3: 12px;
--border-radius-4: 16px;
--border-radius-full: 9999px;
/* font-size */
--font-size-1: 12px;
--font-size-2: 14px;
--font-size-3: 16px;
--font-size-4: 18px;
--font-size-5: 20px;
--font-size-6: 22px;
--font-size-7: 26px;
--font-size-8: 32px;
--font-size-9: 56px;
/* font-weight */
--font-weight-1: 400;
--font-weight-2: 500;
--font-weight-3: 700;
/* opacity */
--opacity-0: 0;
--opacity-1: 0.1;
--opacity-2: 0.18;
--opacity-3: 0.3;
--opacity-4: 0.45;
--opacity-5: 0.5;
--opacity-6: 0.57;
--opacity-7: 0.7;
--opacity-8: 0.8;
--opacity-9: 0.9;
--opacity-10: 1;
/* order */
--order-1: -1;
--order-2: 2;
--order-3: 3;
--order-4: 4;
--order-5: 5;
/* box-shadow */
--box-shadow-1: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
--box-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.01);
--box-shadow-3: 0px 3px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.01);
--box-shadow-4: 0px 6px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 3px -2px rgba(0, 0, 0, 0.01);
--box-shadow-5: 0px 8px 12px -2px rgba(0, 0, 0, 0.08), 0px 3px 4px -3px rgba(0, 0, 0, 0.01);
--box-shadow-6: 0px 16px 20px -4px rgba(0, 0, 0, 0.08), 0px 6px 8px -5px rgba(0, 0, 0, 0.01);
--box-shadow-7: 0px 20px 40px -9px rgba(0, 0, 0, 0.17);
/* z-index */
--z-index-1: 1;
--z-index-2: 200;
--z-index-3: 500;
--z-index-4: 1000;
--z-index-5: 2000;
/* icon */
--icon-size-1: 12px;
--icon-size-2: 16px;
--icon-size-3: 18px;
--icon-size-4: 20px;
--icon-size-5: 24px;
--icon-color: var(--color-base-9);
/* deco */
--deco-size-1: 12px;
--deco-size-2: 16px;
--deco-size-3: 18px;
--deco-size-4: 20px;
--deco-size-5: 24px;
--deco-color: var(--color-base-9);
/* position */
--left-1: 0;
--left-2: 100px;
--left-3: 200px;
--left-4: 300px;
--left-5: 400px;
--left-6: 500px;
--left-7: 600px;
--left-8: 700px;
--left-9: 800px;
--left-10: 900px;
--left-percent-1: 10%;
--left-percent-2: 20%;
--left-percent-3: 30%;
--left-percent-4: 40%;
--left-percent-5: 50%;
--left-percent-6: 60%;
--left-percent-7: 70%;
--left-percent-8: 80%;
--left-percent-9: 90%;
--left-percent-10: 100%;
--top-1: 0;
--top-2: 100px;
--top-3: 200px;
--top-4: 300px;
--top-5: 400px;
--top-6: 500px;
--top-7: 600px;
--top-8: 700px;
--top-9: 800px;
--top-10: 900px;
--top-percent-1: 10%;
--top-percent-2: 20%;
--top-percent-3: 30%;
--top-percent-4: 40%;
--top-percent-5: 50%;
--top-percent-6: 60%;
--top-percent-7: 70%;
--top-percent-8: 80%;
--top-percent-9: 90%;
--top-percent-10: 100%;
--right-1: 0;
--right-2: 100px;
--right-3: 200px;
--right-4: 300px;
--right-5: 400px;
--right-6: 500px;
--right-7: 600px;
--right-8: 700px;
--right-9: 800px;
--right-10: 900px;
--right-percent-1: 10%;
--right-percent-2: 20%;
--right-percent-3: 30%;
--right-percent-4: 40%;
--right-percent-5: 50%;
--right-percent-6: 60%;
--right-percent-7: 70%;
--right-percent-8: 80%;
--right-percent-9: 90%;
--right-percent-10: 100%;
--bottom-1: 0;
--bottom-2: 100px;
--bottom-3: 200px;
--bottom-4: 300px;
--bottom-5: 400px;
--bottom-6: 500px;
--bottom-7: 600px;
--bottom-8: 700px;
--bottom-9: 800px;
--bottom-10: 900px;
--bottom-percent-1: 10%;
--bottom-percent-2: 20%;
--bottom-percent-3: 30%;
--bottom-percent-4: 40%;
--bottom-percent-5: 50%;
--bottom-percent-6: 60%;
--bottom-percent-7: 70%;
--bottom-percent-8: 80%;
--bottom-percent-9: 90%;
--bottom-percent-10: 100%;
}border-color
변수 var(--border-color)는 테두리의 기본 색상을 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
다음의 테두리 스타일이 기본 제공됩니다.
기본 스타일
Hello world
html
<div class="border border-radius:2 ...">
Hello World
</div>css
:root {
--border-color: var(--color-base-3); /* #dee2e6 */
}테마 색상 var(--color-base-3) 에 대한 내용은 여기를 참고해주세요.
Overriding
다음과 같이 기본 테두리 색상을 재정의할 수 있습니다.
기본 스타일
Hello World
html
<div class="border border-radius:2 ...">
Hello World
</div>css
/* root.css */
:root {
--border-color: var(--color-base-3); /* #dee2e6 */
--border-color: var(--color-main-3); /* #759d2a */
}border-radius
변수 border-radius는 테두리의 둥글기를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
4px 간격으로 다섯 단계의 둥글기와 원 모양의 둥글기가 기본 제공됩니다.
0
1
2
3
4
full
html
<div class="border-radius:0 ...">0</div>
<div class="border-radius:1 ...">1</div>
<div class="border-radius:2 ...">2</div>
<div class="border-radius:3 ...">3</div>
<div class="border-radius:4 ...">4</div>
<div class="border-radius:full ...">full</div>css
:root {
--border-radius-0: 0;
--border-radius-1: 4px;
--border-radius-2: 8px;
--border-radius-3: 12px;
--border-radius-4: 16px;
--border-radius-full: 9999px;
}Overriding
다음과 같이 둥글기의 단계를 재정의할 수 있습니다.
0
1
2
3
4
html
<div class="border-radius:0 ...">0</div>
<div class="border-radius:1 ...">1</div>
<div class="border-radius:2 ...">2</div>
<div class="border-radius:3 ...">3</div>
<div class="border-radius:4 ...">4</div>css
:root {
--border-radius-0: 0;
--border-radius-1: 4px;
--border-radius-2: 8px;
--border-radius-3: 12px;
--border-radius-4: 16px;
--border-radius-1: 2px;
--border-radius-2: 4px;
--border-radius-3: 6px;
--border-radius-4: 8px;
--border-radius-full: 9999px;
}border-width
변수 border-width는 테두리의 너비를 정의하는 데 사용되며, 다음의 유틸리티에서 사용되고 있습니다.
Default
1px 간격으로 세 단계의 너비가 기본 제공됩니다.
1
2
3
html
<div class="d:flex gap:3">
<div class="border border-radius:2 border-color:main-1 border-width:1 ...">
1
</div>
<div class="border border-radius:2 border-color:main-1 border-width:2 ...">
2
</div>
<div class="border border-radius:2 border-color:main-1 border-width:3 ...">
3
</div>
</div>css
:root {
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 3px;
}Overriding
다음과 같이 단계를 추가할 수 있습니다.
4
5
6
html
<div class="d:flex gap:3">
<div class="border border-radius:2 border-color:main-1 border-width:4 ...">
4
</div>
<div class="border border-radius:2 border-color:main-1 border-width:5 ...">
5
</div>
<div class="border border-radius:2 border-color:main-1 border-width:6 ...">
6
</div>
</div>css
:root {
/* ... */
--border-width-4: 4px;
--border-width-5: 5px;
--border-width-6: 6px;
}box-shadow
변수 box-shadow는 박스의 기본 그림자 스타일를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
일곱 종류의 그림자 스타일이 기본 제공됩니다.
1
2
3
4
5
6
7
html
<div class="d:flex flex-wrap:wrap gap:10">
<div class="box-shadow:1 ...">
1
</div>
<div class="box-shadow:2 ...">
2
</div>
<div class="box-shadow:3 ...">
3
</div>
<!-- ... -->
<div class="box-shadow:7 ...">
7
</div>
</div>css
:root {
--box-shadow-1: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
--box-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.01);
--box-shadow-3: 0px 3px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.01);
--box-shadow-4: 0px 6px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 3px -2px rgba(0, 0, 0, 0.01);
--box-shadow-5: 0px 8px 12px -2px rgba(0, 0, 0, 0.08), 0px 3px 4px -3px rgba(0, 0, 0, 0.01);
--box-shadow-6: 0px 16px 20px -4px rgba(0, 0, 0, 0.08), 0px 6px 8px -5px rgba(0, 0, 0, 0.01);
--box-shadow-7: 0px 20px 40px -9px rgba(0, 0, 0, 0.17);
}Overriding
다음과 같이 기본 그림자 스타일을 재정의할 수 있습니다.
1
2
3
4
5
6
7
html
<div class="d:flex flex-wrap:wrap gap:10">
<div class="box-shadow:1 ...">
1
</div>
<div class="box-shadow:2 ...">
2
</div>
<div class="box-shadow:3 ...">
3
</div>
<!-- ... -->
<div class="box-shadow:7 ...">
7
</div>
</div>css
/* root.css */
:root {
--box-shadow-1: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);
--box-shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px -0.5px rgba(0, 0, 0, 0.01);
--box-shadow-3: 0px 3px 4px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.01);
--box-shadow-4: 0px 6px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 3px -2px rgba(0, 0, 0, 0.01);
--box-shadow-5: 0px 8px 12px -2px rgba(0, 0, 0, 0.08), 0px 3px 4px -3px rgba(0, 0, 0, 0.01);
--box-shadow-6: 0px 16px 20px -4px rgba(0, 0, 0, 0.08), 0px 6px 8px -5px rgba(0, 0, 0, 0.01);
--box-shadow-7: 0px 20px 40px -9px rgba(0, 0, 0, 0.17);
--box-shadow-1: 1px 2px 3px 0.1px rgba(0, 0, 0, 0.1);
--box-shadow-2: 2px 3px 4px 0.1px rgba(0, 0, 0, 0.2);
--box-shadow-3: 3px 4px 5px 0.1px rgba(0, 0, 0, 0.3);
--box-shadow-4: 4px 5px 6px 0.1px rgba(0, 0, 0, 0.4);
--box-shadow-5: 5px 6px 7px 0.1px rgba(0, 0, 0, 0.5);
--box-shadow-6: 6px 7px 8px 0.1px rgba(0, 0, 0, 0.6);
--box-shadow-7: 7px 8px 9px 0.1px rgba(0, 0, 0, 0.7);
}font-size
변수 var(--font-size)는 폰트의 기본 크기를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
아홉 단계의 폰트 크기가 기본 제공됩니다.
이 문장은 폰트 크기 16px로 작성되었습니다.
1 - Hello World! (12px)
2 - Hello World! (14px)
3 - Hello World! (16px)
4 - Hello World! (18px)
5 - Hello World! (20px)
6 - Hello World! (22px)
7 - Hello World! (26px)
8 - Hello World! (32px)
9 - Hello World! (56px)
html
<p class="font-size:1">Hello World!</p>
<p class="font-size:2">Hello World!</p>
<p class="font-size:3">Hello World!</p>
<!-- ... -->
<p class="font-size:9">Hello World!</p>css
:root {
--font-size-1: 12px;
--font-size-2: 14px;
--font-size-3: 16px;
--font-size-4: 18px;
--font-size-5: 20px;
--font-size-6: 22px;
--font-size-7: 26px;
--font-size-8: 32px;
--font-size-9: 56px;
}Overriding
다음과 같이 기본 폰트 크기를 재정의할 수 있습니다.
이 문장은 폰트 크기 16px로 작성되었습니다.
1 - Hello World! (12px)
2 - Hello World! (14px)
3 - Hello World! (16px)
4 - Hello World! (18px)
5 - Hello World! (20px)
6 - Hello World! (22px)
7 - Hello World! (24px)
8 - Hello World! (26px)
9 - Hello World! (28px)
html
<p class="font-size:1">Hello World!</p>
<p class="font-size:2">Hello World!</p>
<p class="font-size:3">Hello World!</p>
<!-- ... -->
<p class="font-size:9">Hello World!</p>css
:root {
--font-size-1: 12px;
--font-size-2: 14px;
--font-size-3: 16px;
--font-size-4: 18px;
--font-size-5: 20px;
--font-size-6: 22px;
--font-size-7: 26px;
--font-size-8: 32px;
--font-size-9: 56px;
--font-size-7: 24px;
--font-size-8: 26px;
--font-size-9: 28px;
}font-weight
변수 var(--font-weight)는 폰트의 기본 두께를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
세 단계의 폰트 두께가 기본 제공됩니다.
1 - Hello World! (400)
2 - Hello World! (500)
3 - Hello World! (700)
html
<div class="font-weight:1">Hello World!</div>
<div class="font-weight:2">Hello World!</div>
<div class="font-weight:3">Hello World!</div>css
:root {
--font-weight-1: 400;
--font-weight-2: 500;
--font-weight-3: 700;
}Overriding
다음과 같이 기본 폰트 두께를 재정의할 수 있습니다.
1 - Hello World! (300)
2 - Hello World! (500)
3 - Hello World! (700)
html
<div class="font-weight:1">Hello World!</div>
<div class="font-weight:2">Hello World!</div>
<div class="font-weight:3">Hello World!</div>css
:root {
--font-weight-1: 400;
--font-weight-1: 300;
--font-weight-2: 500;
--font-weight-3: 700;
}gap
변수 var(--gap)은 간격 및 크기를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
| gap-* | margin-* | padding-* | text-* | | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | --- | | gap | margin | padding | text-indent | | column-gap | margin-top | padding-top | | | row-gap | margin-right | padding-right | | | | margin-bottom | padding-bottom | | | | margin-left | padding-left | | | | | margin-x | padding-x | | | | | margin-y | padding-y | | |
Default
열 단계의 간격이 기본 제공됩니다.
1
2
3
4
5
6
7
8
9
10
html
<div class="d:flex gap:1">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<div class="d:flex gap:2">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<div class="d:flex gap:3">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<!-- ... -->
<div class="d:flex gap:10">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>css
:root {
--gap-0: 0px;
--gap-1: 4px;
--gap-2: 8px;
--gap-3: 12px;
--gap-4: 16px;
--gap-5: 20px;
--gap-6: 24px;
--gap-7: 28px;
--gap-8: 32px;
--gap-9: 36px;
--gap-10: 40px;
--gap-full: 9999px;
}Overriding
다음과 같이 단계를 추가할 수 있습니다.
11
12
13
14
15
16
17
18
19
20
html
<div class="d:flex gap:11">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<div class="d:flex gap:12">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<div class="d:flex gap:13">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>
<!-- ... -->
<div class="d:flex gap:20">
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
<div class="bg-color:main-1 border-radius:2 w:1 h:1 d:flex ai:center jc:center"></div>
</div>css
:root {
/* ... */
--gap-11: 44px;
--gap-12: 48px;
--gap-13: 52px;
--gap-14: 56px;
--gap-15: 60px;
--gap-16: 64px;
--gap-17: 68px;
--gap-18: 72px;
--gap-19: 76px;
--gap-20: 80px;
}height
변수 height, height-percent는 요소의 높이를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
열 단계의 고정 크기와 퍼센트가 기본 제공됩니다.
css
:root {
--height-0: 0px;
--height-1: 50px;
--height-2: 100px;
--height-3: 150px;
--height-4: 200px;
--height-5: 250px;
--height-6: 300px;
--height-7: 350px;
--height-8: 400px;
--height-9: 450px;
--height-10: 500px;
--height-percent-1: 10%;
--height-percent-2: 20%;
--height-percent-3: 30%;
--height-percent-4: 40%;
--height-percent-5: 50%;
--height-percent-6: 60%;
--height-percent-7: 70%;
--height-percent-8: 80%;
--height-percent-9: 90%;
--height-percent-10: 100%;
}Overriding
다음과 같이 크기를 재정의할 수 있습니다.
css
:root {
--height-0: 0px;
--height-1: 50px;
--height-2: 100px;
--height-0: 32px;
--height-1: 48x;
--height-2: 64px;
}opacity
변수 var(--opacity)는 요소의 불투명도를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
열 단계의 불투명도가 기본 제공됩니다.
1
2
3
4
5
6
7
8
9
10
html
<div class="opacity:1 ...">1</div>
<div class="opacity:2 ...">2</div>
<div class="opacity:3 ...">3</div>
<!-- ... -->
<div class="opacity:10 ...">10</div>css
:root {
--opacity-0: 0;
--opacity-1: 0.1;
--opacity-2: 0.18;
--opacity-3: 0.3;
--opacity-4: 0.45;
--opacity-5: 0.5;
--opacity-6: 0.57;
--opacity-7: 0.7;
--opacity-8: 0.8;
--opacity-9: 0.9;
--opacity-10: 1;
}Overriding
다음과 같이 기본 불투명도 설정을 재정의할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
html
<div class="opacity:1 ...">1</div>
<div class="opacity:2 ...">2</div>
<div class="opacity:3 ...">3</div>
<!-- ... -->
<div class="opacity:10 ...">10</div>css
:root {
--opacity-0: 0;
--opacity-1: 0.1;
--opacity-2: 0.18;
/* ... */
--opacity-9: 0.9;
--opacity-0: 0.5;
--opacity-1: 0.55;
--opacity-2: 0.6;
/* ... */
--opacity-9: 0.95;
--opacity-10: 1;
}order
변수 var(--order)는 요소의 배치 순서를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
다섯 단계의 순서값이 기본 제공됩니다.
1
2
3
4
5
html
<div class="order:1 ...">1</div>
<div class="order:4 ...">2</div>
<div class="order:2 ...">3</div>
<div class="order:5 ...">4</div>
<div class="order:3 ...">5</div>css
:root {
--order-1: -1;
--order-2: 2;
--order-3: 3;
--order-4: 4;
--order-5: 5;
}Overriding
다음과 같이 단계를 추가할 수 있습니다.
1
2
3
4
5
6
7
8
html
<div class="order:1 ...">1</div>
<div class="order:5 ...">2</div>
<div class="order:2 ...">3</div>
<div class="order:6 ...">4</div>
<div class="order:3 ...">5</div>
<div class="order:7 ...">6</div>
<div class="order:4 ...">7</div>
<div class="order:8 ...">8</div>css
:root {
/* ... */
--order-6: 6;
--order-7: 7;
--order-8: 8;
}theme color
Newtil CSS는 ─ main, sub, accent, base ─ 네 가지 테마 색상를 제공하며 다음의 유틸리티에서 활용되고 있습니다:
Default
main
주요 색을 나타냅니다.
메인 색상
1
2
3
html
<div class="d:flex">
<div class="bg-color:main-1 color:base-1 ...">1</div>
<div class="bg-color:main-2 color:base-1 ...">2</div>
<div class="bg-color:main-3 color:base-1 ...">3</div>
</div>css
:root {
--color-main-1: #99c842;
--color-main-2: #85b132;
--color-main-3: #759d2a;
--rgb-main-1: 153, 200, 66;
--rgb-main-2: 133, 177, 50;
--rgb-main-3: 117, 157, 42;
}sub
주요 색을 보조하는 색을 나타냅니다.
보조 색상
1
2
3
html
<div class="d:flex">
<div class="bg-color:sub-1 color:base-1 ...">1</div>
<div class="bg-color:sub-2 color:base-1 ...">2</div>
<div class="bg-color:sub-3 color:base-1 ...">3</div>
</div>css
:root {
--color-sub-1: #339af0;
--color-sub-2: #228be6;
--color-sub-3: #1c7ed6;
--rgb-sub-1: 51, 154, 240;
--rgb-sub-2: 34, 139, 230;
--rgb-sub-3: 28, 126, 214;
}accent
경고, 오류 등 강조하는 색을 나타냅니다.
강조 색상
1
2
3
html
<div class="d:flex">
<div class="bg-color:accent-1 color:base-1 ...">1</div>
<div class="bg-color:accent-2 color:base-1 ...">2</div>
<div class="bg-color:accent-3 color:base-1 ...">3</div>
</div>css
:root {
--color-accent-1: #ff6b6b;
--color-accent-2: #fa5252;
--color-accent-3: #f03e3e;
--rgb-accent-1: 255, 107, 107;
--rgb-accent-2: 250, 82, 82;
--rgb-accent-3: 240, 62, 62;
}base
중립적인 색입니다.
중립 색상
1
2
3
4
5
6
7
8
9
10
html
<div class="d:flex">
<div class="bg-color:base-1 color:base-1 ...">1</div>
<div class="bg-color:base-2 color:base-1 ...">2</div>
<div class="bg-color:base-3 color:base-1 ...">3</div>
<!-- ... -->
<div class="bg-color:base-10 color:base-1 ...">10</div>
</div>css
:root {
--color-base-1: #ffffff;
--color-base-2: #e4e7ea;
--color-base-3: #dee2e6;
--color-base-4: #ced4da;
--color-base-5: #adb5bd;
--color-base-6: #868e96;
--color-base-7: #495057;
--color-base-8: #343a40;
--color-base-9: #1a1c20;
--color-base-10: #000000;
--rgb-base-1: 255, 255, 255;
--rgb-base-2: 228, 231, 234;
--rgb-base-3: 222, 226, 230;
--rgb-base-4: 206, 212, 218;
--rgb-base-5: 173, 181, 189;
--rgb-base-6: 134, 142, 150;
--rgb-base-7: 73, 80, 87;
--rgb-base-8: 52, 58, 64;
--rgb-base-9: 26, 28, 32;
--rgb-base-10: 0, 0, 0;
}Overriding
다음과 같이 테마 색상을 재정의할 수 있습니다.
색상 재정의
1
2
3
html
<div class="d:flex">
<div class="bg-color:main-1 color:base-1 ...">1</div>
<div class="bg-color:main-2 color:base-1 ...">2</div>
<div class="bg-color:main-3 color:base-1 ...">3</div>
</div>css
:root {
--color-main-1: #99c842;
--color-main-2: #85b132;
--color-main-3: #759d2a;
--color-main-1: #ffdd54;
--color-main-2: #ffd322;
--color-main-3: #f0c000;
--rgb-main-1: 153, 200, 66;
--rgb-main-2: 133, 177, 50;
--rgb-main-3: 117, 157, 42;
--rgb-main-1: 255, 221, 84;
--rgb-main-2: 255, 211, 34;
--rgb-main-3: 240, 192, 0;
}top, right, bottom, left
변수 top, top-percent, right, right-percent, bottom, bottom-percent, left, left-percent는 요소의 위치를 지정하는데 사용하며, 다음의 유틸리티에서 활용되고 있습니다:
모두보기
css
:root {
--left-1: 0;
--left-2: 100px;
--left-3: 200px;
--left-4: 300px;
--left-5: 400px;
--left-6: 500px;
--left-7: 600px;
--left-8: 700px;
--left-9: 800px;
--left-10: 900px;
--left-percent-1: 10%;
--left-percent-2: 20%;
--left-percent-3: 30%;
--left-percent-4: 40%;
--left-percent-5: 50%;
--left-percent-6: 60%;
--left-percent-7: 70%;
--left-percent-8: 80%;
--left-percent-9: 90%;
--left-percent-10: 100%;
--top-1: 0;
--top-2: 100px;
--top-3: 200px;
--top-4: 300px;
--top-5: 400px;
--top-6: 500px;
--top-7: 600px;
--top-8: 700px;
--top-9: 800px;
--top-10: 900px;
--top-percent-1: 10%;
--top-percent-2: 20%;
--top-percent-3: 30%;
--top-percent-4: 40%;
--top-percent-5: 50%;
--top-percent-6: 60%;
--top-percent-7: 70%;
--top-percent-8: 80%;
--top-percent-9: 90%;
--top-percent-10: 100%;
--right-1: 0;
--right-2: 100px;
--right-3: 200px;
--right-4: 300px;
--right-5: 400px;
--right-6: 500px;
--right-7: 600px;
--right-8: 700px;
--right-9: 800px;
--right-10: 900px;
--right-percent-1: 10%;
--right-percent-2: 20%;
--right-percent-3: 30%;
--right-percent-4: 40%;
--right-percent-5: 50%;
--right-percent-6: 60%;
--right-percent-7: 70%;
--right-percent-8: 80%;
--right-percent-9: 90%;
--right-percent-10: 100%;
--bottom-1: 0;
--bottom-2: 100px;
--bottom-3: 200px;
--bottom-4: 300px;
--bottom-5: 400px;
--bottom-6: 500px;
--bottom-7: 600px;
--bottom-8: 700px;
--bottom-9: 800px;
--bottom-10: 900px;
--bottom-percent-1: 10%;
--bottom-percent-2: 20%;
--bottom-percent-3: 30%;
--bottom-percent-4: 40%;
--bottom-percent-5: 50%;
--bottom-percent-6: 60%;
--bottom-percent-7: 70%;
--bottom-percent-8: 80%;
--bottom-percent-9: 90%;
--bottom-percent-10: 100%;
}Overriding
다음과 같이 위치를 재정의할 수 있습니다.
css
:root {
--top-1: 4px;
--top-2: 8px;
}width
변수 width, width-percent는 요소의 너비를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
열 단계의 고정 크기와 퍼센트가 기본 제공됩니다.
css
:root {
--width-0: 0px;
--width-1: 50px;
--width-2: 100px;
--width-3: 150px;
--width-4: 200px;
--width-5: 250px;
--width-6: 300px;
--width-7: 350px;
--width-8: 400px;
--width-9: 450px;
--width-10: 500px;
--width-percent-1: 10%;
--width-percent-2: 20%;
--width-percent-3: 30%;
--width-percent-4: 40%;
--width-percent-5: 50%;
--width-percent-6: 60%;
--width-percent-7: 70%;
--width-percent-8: 80%;
--width-percent-9: 90%;
--width-percent-10: 100%;
}Overriding
다음과 같이 크기를 재정의할 수 있습니다.
css
:root {
--width-0: 0px;
--width-1: 50px;
--width-2: 100px;
--width-0: 32px;
--width-1: 48x;
--width-2: 64px;
}z-index
변수 var(--z-index)는 z축에서의 우선순위를 정의하는 데 사용되며, 다음의 유틸리티에서 활용되고 있습니다:
Default
다섯 단계의 순서값이 기본 제공됩니다.
5
4
3
2
1
html
<div class="z-index:5 ...">5</div>
<div class="z-index:4 ...">4</div>
<div class="z-index:3 ...">3</div>
<div class="z-index:2 ...">2</div>
<div class="z-index:1 ...">1</div>css
:root {
--z-index-1: 1;
--z-index-2: 200;
--z-index-3: 500;
--z-index-4: 1000;
--z-index-5: 2000;
}Overriding
다음과 같이 단계를 재정의하거나 추가할 수 있습니다.
1
2
3
7
6
5
4
html
<div class="z-index:1 ...">1</div>
<div class="z-index:2 ...">2</div>
<div class="z-index:3 ...">3</div>
<div class="z-index:7 ...">7</div>
<div class="z-index:6 ...">6</div>
<div class="z-index:5 ...">5</div>
<div class="z-index:4 ...">4</div>css
:root {
--z-index-1: 1;
--z-index-2: 200;
--z-index-3: 500;
--z-index-4: 1000;
--z-index-5: 2000;
--z-index-4: 800;
--z-index-5: 1000;
--z-index-6: 1200;
--z-index-7: 2000;
}