Hello AdorableCSS!
1. Colors
2. Typography
✨3. TextBox(align)
4. Box Model
5. Overflow
✨6. Flexbox
✨7. Position
8. Layer
9. Visibility
10. Hover, Active
11. Pseudo Class
12. Pseudo Element
13. Media Query
14. Selector
15. Important!
16. Grouping +
✨17. DarkMode
계속 작업 중입니다...
*,:after,:before{margin:0;padding:0;font:inherit;color:inherit;box-sizing:border-box;} :root{-webkit-tap-highlight-color:transparent;text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:2;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} html,body{height:100%;} img,picture,video,canvas{display:block;max-width:100%;} img{text-indent:-9999px;} button{background:none;border:0;cursor:pointer;} a{text-decoration:none;} table{border-collapse:collapse;border-spacing:0;} ol,ul,menu,dir{list-style:none;} *,:after,:before{--w-grow:initial;--w-align:initial;--h-grow:initial;--h-align:initial;} *,:after,:before{ --a-translate-x:0; --a-translate-y:0; --a-rotate:0; --a-skew-x:0; --a-skew-y:0; --a-scale-x:1; --a-scale-y:1; --a-transform:translateX(var(--a-translate-x)) translateY(var(--a-translate-y)) rotate(var(--a-rotate)) skewX(var(--a-skew-x)) skewY(var(--a-skew-y)) scaleX(var(--a-scale-x)) scaleY(var(--a-scale-y)); --a-transform3d:translate3d(var(--a-translate-x),var(--a-translate-y),0) rotate(var(--a-rotate)) skewX(var(--a-skew-x)) skewY(var(--a-skew-y)) scaleX(var(--a-scale-x)) scaleY(var(--a-scale-y)); } .\32 00{font-weight:200;} .c\(red\){color:red;} .c\(\#ccc\){color:#ccc;} .group:hover .group-hover\:c\(\#fb3958\),html .group.\:hover .group-hover\:c\(\#fb3958\){color:#fb3958;} .c\(\#666\){color:#666;} .font\(20\){font-size:20px;} .font\(100\/-\/-15\%\){font-size:100px;letter-spacing:-0.15em;} .font\(30\){font-size:30px;} .AppleSD{font-family:"Apple SD Gothic Neo";} .text-center{text-align:center;} .vertical-top{vertical-align:top;} .p\(50\){padding:50px;} .hbox{display:flex;flex-flow:row;align-items:center;}:where(.hbox>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} .vbox{display:flex;flex-flow:column;align-items:stretch;}:where(.vbox>*){flex-shrink:0;--h-grow:1;--h-shrink:1;--h-align:initial;--w-grow:initial;--w-shrink:0;--w-align:stretch;} .pack{display:flex;align-items:center;justify-content:center;}:where(.pack>*){flex-shrink:0;--w-grow:1;--w-shrink:1;--w-align:initial;--h-grow:initial;--h-shrink:0;--h-align:stretch;} .gap\(20\){gap:20px;grid-gap:20px;} .opacity\(0\.7\){opacity:0.7;} @media(hover:hover){.hover\:opacity\(1\):hover,.hover\:opacity\(1\).\:hover{opacity:1;}} .pointer{cursor:pointer;} .transition\(\.4s\){transition:all .4s;} .group:hover .group-hover\:rotate\(-10deg\),html .group.\:hover .group-hover\:rotate\(-10deg\){--a-rotate:-10deg;--a-rotate-x:-10deg;--a-rotate-y:-10deg;--a-rotate-z:-10deg;transform:var(--a-transform);} html .group:active .group-active\:rotate\(10deg\),html .group.\:active .group-active\:rotate\(10deg\){--a-rotate:10deg;--a-rotate-x:10deg;--a-rotate-y:10deg;--a-rotate-z:10deg;transform:var(--a-transform);} .group:hover .group-hover\:rotate\(10deg\),html .group.\:hover .group-hover\:rotate\(10deg\){--a-rotate:10deg;--a-rotate-x:10deg;--a-rotate-y:10deg;--a-rotate-z:10deg;transform:var(--a-transform);} html .group:active .group-active\:rotate\(-10deg\),html .group.\:active .group-active\:rotate\(-10deg\){--a-rotate:-10deg;--a-rotate-x:-10deg;--a-rotate-y:-10deg;--a-rotate-z:-10deg;transform:var(--a-transform);} @media(hover:hover){.hover\:scale\(1\.05\):hover,.hover\:scale\(1\.05\).\:hover{--a-scale-x:1.05;--a-scale-y:1.05;--a-scale-z:1.05;transform:var(--a-transform);}}