Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more. Sass에서의 변수는 그 이름 앞에 $를 붙여 선언할 수 있습니다. 변수를 호출할 때도 동일하게 그 앞에 $를 ..

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..

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  :  한 줄을 전부 차지..