아카이브

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

일반적인 CSS에서는 url 속성을 다음과 같이 설정합니다..SomeStyle { background-image: url('./directory/to/the/image.svg');} 이를 React에서 사용하기 위한 JSX 형식으로 바꾸면 이렇게 될텐데요,const SomeStyle = { backgroundImage: "url('./directory/to/the/image.svg')"}; 실제로 이를 실행하면 정상적으로 동작하지 않습니다. 이는 React가 실행되는 방식과 관계가 있습니다. 우리가 작성한 JSX 코드는 프로젝트를 실행할 때 실행 가능한 JS 코드 형태로 변환됩니다.이 과정에서 파일의 위치 또한 달라질 수 있는데, 파일 경로 자체가 수정되거나 용량이 작은 파일인 경우 JS 코드에 포함..

JSX 문법을 사용해 CSS를 적용하는 방식은 HTML에서 CSS를 적용하는 방식과 유사합니다. 역시 다른 점이라고 한다면, JSX 문법으로 인해 생기는 HTML과의 차이점 정도라고 할 수 있겠습니다. [JSX에 대해서] JSX에서 style은 객체 형태로 넘겨줄 수 있어, style을 먼저 변수로 선언한 뒤 {중괄호}로 불러올 수 있습니다.CamelCase를 사용합니다(e.g. background-color → backgroundColor).스프레드 문법({..., })을 사용하면 클래스 상속과 같이 다른 스타일의 요소들을 사용할 수 있습니다.아래는 버튼에 스타일을 적용하는 코드입니다. 버튼의 공통된 스타일은 baseButtonStyle에, 색과 관련된 코드는 blueButtonStyle과 redBut..

선택자(Selector)는 마크업 언어에서 작성된 요소들 중 원하는 범위를 선택하는데 사용됩니다.선택자를 이용하면 원하는 요소들에 CSS 스타일을 적용할 수 있습니다. 선택자를 통해 특정 속성(property)을 원하는 값(value)로 설정하기 위해서는 다음과 같은 문법을 따릅니다.Selector { property : value }선택자범위*모두#cid 속성값이 c.cclass 속성값이 cE태그 이름이 EE FE의 하위 FE > FE의 자식 FE + FE 앞에 있는 F E : first-child 부모의 첫 자식인 E E : link E가 방문 안한 자원 E : visited E가 방문 한 자원 E : active E가 활성화 됐을 때 E : hover E 위에 마우스가 지나갈 때 E..