Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries. Mixin은 스타일 시트에서 사용자가 정의한 스타일을 재사용할 수 있게 해주는 구문입니다. 기본적으로 mixin으로 정의하고, include로 불러옵니다. Mixin을 이용한 스타일은 아래와 같이 정의할 수 있습니다.@mixin center { display: flex; justify-content: center; align-item..

SassSass(Syntactically Awesome Style Sheets)는 CSS를 좀 더 쉽게 다루기 위해 개발된 전처리기(preprocessor) 입니다. CSS는 단순하지만, 프로젝트의 규모가 커질 수록 쓰기 불편한 점이 많았습니다. 특정 색상이나 선택자가 반복해서 나타나거나, 조건문 또는 반복문 등의 흐름제어가 불가능 한 것, 그리고 변수를 지원하지 않는 것 등이 그 예입니다. Sass는 이런 문제점들을 보완하고자 기존 CSS에 추가적인 문법을 추가하였습니다.$main-color: #3498dbbody color: $main-color background: whiteSass는 빌드할 때 CSS로 변환되기 때문에, 기존에 존재하던 CSS 파일도 확장자만 바꾸면 Sass 파일로서 사용할 수..

Tailwindcss를 사용할 때 알아두면 좋은 잡다한 사항들에 대해 정리합니다.투명도 별도 적용하기기본적으로 css는 투명도가 누적 적용됩니다. 이 말은 부모 요소에서 90%의 투명도를 적용한다면, 자식 요소에서 100%의 투명도(=투명도 없음)을 적용해도 여전히 90%의 투명도로 적용된다는 뜻입니다. 때문에 투명도를 별개 적용하려면 opacitiy보다는 rgba의 값으로 background를 설정해야 하는데, tailwind에서는 아래와 같이 rbga값을 간단하게 나타낼 수 있습니다....이는 main이라는 색상에 90%의 alpha(=투명도)값을 적용한다는 뜻입니다.

Tailwindcss의 theme은 사용자가 직접 색상, 글꼴, 크기 등을 지정하여 변수처럼 사용할 수 있게 하는 기능입니다. 이렇게 정의된 변수를 theme variable이라고 합니다. Theme은 기본적으로 css 파일(보통 최상단인 index.css에 작성합니다)에서 다음과 같이 선언함으로서 사용할 수 있습니다.@theme { --[분류]-[variable 이름]: [variable 값];} 분류에는 색상, 글꼴 등 스타일의 종류가 들어가며, 이름은 자유롭게 설정이 가능합니다. 예를 들어 다음과 같이 설정할 수 있습니다.@theme { --color-main: #3a4578; // 색상 : main = #3a4578 --text-size-title: 7...

Tailwind CSS는 CSS-in-JS 프레임워크의 일종으로, CSS 대신 클래스명을 제공하여 간단한 문자열 만으로도 HTML 스타일이 구현되는 유틸리티 우선 CSS 프레임워크(utiliy-first-css framework)입니다. Tailwind CSS의 장점이라고 하면 기존의 많은 분량을 차지하는 CSS 스타일을 극단적으로 줄여 코드를 가볍게 만들 수 있다는 것입니다. this is css style this is tailwind style 단점은, 스타일이 커질수록 가독성이 떨어진다는 것입니다.const inputLineStyle = ` border-b border-gray bg-transparent text-2xl text-gray w-full h-16 p..

SolidJS 환경에서 Macaron js를 설치해서 사용하는 방법입니다.자세한 내용은 공식 사이트에서 확인할 수 있습니다.https://macaron.js.org/docs/installation macaron — Colocated CSS-in-JS with zero-runtimeTypesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.macaron.js.org 1. 라이브러리 설치설치를 원하는 프로젝트 폴더에서 다음 명령어를 실행합니다.# npmnpm install @macaron-css/core ..

Macaron은 타입 안정성을 가지는 CSS-in-JS 컴파일 타임 라이브러리입니다. 자세한 설명은 아래 Github 링크에서 확인할 수 있습니다. https://github.com/macaron-css/macaron GitHub - macaron-css/macaron: Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productiviCompiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity - macaron-css/macarongithub.com ※ CSS-in-JS : J..

CSS에서 지정 가능한 속성값들에 대해 정리합니다. 지속적으로 갱신됩니다.(길이 단위는 px, em, %, ch 등을 포함합니다)크기이름속성값 예시입력값height높이d길이margin바깥쪽 여백a           :  공통a b        :  상/하 | 좌/우a b c     :  상 | 좌/우 | 하a b c d  :  상 | 우 | 하 | 좌길이min-height최소 높이d길이min-width최소 너비d길이padding안쪽 여백a           :  공통a b        :  상/하 | 좌/우a b c     :  상 | 좌/우 | 하a b c d  :  상 | 우 | 하 | 좌길이width너비d길이레이아웃이름속성값예시입력값display레이아웃 정렬 방식block  :  한 줄을 전부 차지..