front-end

[Tailwind CSS 번역] filter: invert()

개요Tailwind CSS의 invert() 필터 유틸리티를 사용하면 개발자가 요소에 색상 반전 효과를 적용할 수 있습니다. 이 기능은 요소의 색상을 반전시켜 네거티브 이미지 효과를 생성합니다.빠른 참조클래스스타일invertfilter: invert(100%);invert-filter: invert(%);invert-()filter: invert(var());invert-[]filter: invert();기본 사용법문서는 이미지 요소에 적용된 invert 유틸리티의 세 가지 변형을 보여줍니다:invert-0: 색상 반전이 적용되지 않음invert-20: 20% 색상 반전invert: 완전한 100% 색상 반전HTML 예제사용자 정의 값임의 값 구문표준이 아닌 반전 백분율의 경우 대괄호 표기법을 사용합니다..

2025. 10. 30. 11:11

front-end

[Tailwind CSS 번역] filter: hue-rotate()

개요hue-rotate() 필터 유틸리티를 사용하면 개발자가 요소의 색조를 지정된 각도만큼 회전시킬 수 있습니다.빠른 참조클래스스타일hue-rotate-filter: hue-rotate(deg);-hue-rotate-filter: hue-rotate(calc(deg * -1));hue-rotate-()filter: hue-rotate(var());hue-rotate-[]filter: hue-rotate();기본 예제hue-rotate-90 및 hue-rotate-180과 같은 유틸리티를 적용하여 요소의 색조를 각도만큼 회전시킵니다:사용 가능한 사전 설정 값은 다음과 같습니다: hue-rotate-15, hue-rotate-90, hue-rotate-180, hue-rotate-270.음수 값 사용하기접두..

2025. 10. 30. 11:10

front-end

[Tailwind CSS 번역] filter: drop-shadow()

엘리먼트에 drop-shadow 필터를 적용하는 유틸리티입니다.빠른 참조ClassStylesdrop-shadow-xsfilter: drop-shadow(var(--drop-shadow-xs));/* 0 1px 1px rgb(0 0 0 / 0.05) */drop-shadow-smfilter: drop-shadow(var(--drop-shadow-sm));/* 0 1px 2px rgb(0 0 0 / 0.15) */drop-shadow-mdfilter: drop-shadow(var(--drop-shadow-md));/* 0 3px 3px rgb(0 0 0 / 0.12) */drop-shadow-lgfilter: drop-shadow(var(--drop-shadow-lg));/* 0 4px 4px rgb(0 0..

2025. 10. 30. 11:10

front-end

[Tailwind CSS 번역] filter: contrast()

엘리먼트에 contrast 필터를 적용하는 유틸리티입니다.빠른 참조ClassStylescontrast-filter: contrast(%);contrast-()filter: contrast(var());contrast-[]filter: contrast();예제기본 예제contrast-50 및 contrast-100과 같은 유틸리티를 사용하여 엘리먼트의 contrast를 제어합니다:contrast-50contrast-100contrast-125contrast-200커스텀 값 사용하기contrast-[] 구문을 사용하여 완전히 커스텀 값을 기반으로 contrast를 설정합니다:CSS 변수의 경우 contrast-() 구문을 사용할 수도 있습니다:이것은 자동으로 var() 함수를 추가하는 contrast-[va..

2025. 10. 30. 11:10

front-end

[Tailwind CSS 번역] filter: brightness()

엘리먼트에 brightness 필터를 적용하는 유틸리티입니다.Quick referenceClassStylesbrightness-filter: brightness(%);brightness-()filter: brightness(var());brightness-[]filter: brightness();ExamplesBasic examplebrightness-50과 brightness-100 같은 유틸리티를 사용하여 엘리먼트의 brightness를 제어할 수 있습니다:brightness-50brightness-100brightness-125brightness-200Using a custom valuebrightness-[] 구문을 사용하여 완전히 커스텀한 값을 기반으로 brightness를 설정할 수 있습니다:..

2025. 10. 30. 11:09

front-end

[Tailwind CSS 번역] filter: blur()

엘리먼트에 blur 필터를 적용하는 유틸리티입니다.Quick referenceClassStylesblur-xsfilter: blur(var(--blur-xs)); /* 4px */blur-smfilter: blur(var(--blur-sm)); /* 8px */blur-mdfilter: blur(var(--blur-md)); /* 12px */blur-lgfilter: blur(var(--blur-lg)); /* 16px */blur-xlfilter: blur(var(--blur-xl)); /* 24px */blur-2xlfilter: blur(var(--blur-2xl)); /* 40px */blur-3xlfilter: blur(var(--blur-3xl)); /* 64px */blur-nonefilt..

2025. 10. 30. 11:09

front-end

[Tailwind CSS 번역] backdrop-filter

요소에 backdrop 필터를 적용하기 위한 유틸리티입니다.Quick referenceClassStylesbackdrop-filter-nonebackdrop-filter: none;backdrop-filter-()backdrop-filter: var();backdrop-filter-[]backdrop-filter: ;ExamplesBasic examplebackdrop-blur-xs와 backdrop-grayscale과 같은 유틸리티를 사용하여 요소의 backdrop에 필터를 적용할 수 있습니다:backdrop-blur-xs backdrop-grayscale combined 다음 backdrop 필터 유틸리티를 조합할 수 있습니다: blur, brightness, contrast, grayscale..

2025. 10. 30. 11:09

front-end

[Tailwind CSS 번역] backdrop-filter: sepia()

요소에 backdrop sepia 필터를 적용하기 위한 유틸리티입니다.빠른 참조ClassStylesbackdrop-sepiabackdrop-filter: sepia(100%);backdrop-sepia-backdrop-filter: sepia(%);backdrop-sepia-()backdrop-filter: sepia(var());backdrop-sepia-[]backdrop-filter: sepia();예제기본 예제요소의 backdrop에 적용되는 sepia 효과를 제어하기 위해 backdrop-sepia 및 backdrop-sepia-50과 같은 유틸리티를 사용합니다. 세 가지 강도 레벨이 표시됩니다: backdrop-sepia-0, backdrop-sepia-50, 전체 backdrop-sepia...

2025. 10. 30. 11:08

front-end

[Tailwind CSS 번역] backdrop-filter: saturate()

요소에 backdrop saturation 필터를 적용하기 위한 유틸리티입니다.빠른 참조ClassStylesbackdrop-saturate-backdrop-filter: saturate(%);backdrop-saturate-()backdrop-filter: saturate(var());backdrop-saturate-[]backdrop-filter: saturate();예제기본 예제backdrop saturation 레벨을 제어하기 위해 backdrop-saturate-50, backdrop-saturate-125, backdrop-saturate-200과 같은 유틸리티를 사용합니다: 커스텀 값 사용하기커스텀 saturation 값을 사용하려면 bracket 표기법을 사용합니다: CSS 변수를..

2025. 10. 30. 11:08

front-end

[Tailwind CSS 번역] backdrop-filter: opacity()

요소에 backdrop opacity 필터를 적용하기 위한 유틸리티입니다.빠른 참조ClassStylesbackdrop-opacity-backdrop-filter: opacity(%);backdrop-opacity-()backdrop-filter: opacity(var());backdrop-opacity-[]backdrop-filter: opacity();예제기본 예제요소의 backdrop 필터 투명도를 관리하기 위해 backdrop-opacity-50 및 backdrop-opacity-75와 같은 유틸리티를 사용합니다. 서로 다른 opacity 레벨(10%, 60%, 95%)에서 backdrop 필터 투명도를 제어할 수 있습니다.기본 구현 예시: 커스텀 값 사용하기완전히 커스텀한 opacity 값을 적..

2025. 10. 30. 11:08

front-end

[Tailwind CSS 번역] backdrop-filter: invert()

요소에 backdrop invert 필터를 적용하기 위한 유틸리티입니다.빠른 참조ClassStylesbackdrop-invertbackdrop-filter: invert(100%);backdrop-invert-backdrop-filter: invert(%);backdrop-invert-()backdrop-filter: invert(var())backdrop-invert-[]backdrop-filter: invert();예제기본 예제요소의 배경(backdrop)의 색상 반전을 제어하기 위해 backdrop-invert 및 backdrop-invert-65와 같은 유틸리티를 사용합니다:backdrop-invert-0 backdrop-invert-65 backdrop-invert 커스텀 값 사용하기완전히..

2025. 10. 30. 11:07

front-end

[Tailwind CSS 번역] backdrop-filter: hue-rotate()

Utilities for applying backdrop hue-rotate filters to an element.요소에 배경 색조 회전(hue-rotate) 필터를 적용하기 위한 유틸리티입니다.빠른 참조클래스 구문클래스CSS 출력backdrop-hue-rotate-backdrop-filter: hue-rotate(deg);-backdrop-hue-rotate-backdrop-filter: hue-rotate(calc(deg * -1));backdrop-hue-rotate-()backdrop-filter: hue-rotate(var());backdrop-hue-rotate-[]backdrop-filter: hue-rotate();예제기본 사용법backdrop-hue-rotate-90, backdrop-..

2025. 10. 30. 11:07

front-end

[Tailwind CSS 번역] backdrop-filter: grayscale()

Utilities for applying backdrop grayscale filters to an element.요소에 배경 그레이스케일(grayscale) 필터를 적용하기 위한 유틸리티입니다.빠른 참조클래스CSS 출력backdrop-grayscalebackdrop-filter: grayscale(100%);backdrop-grayscale-backdrop-filter: grayscale(%);backdrop-grayscale-()backdrop-filter: grayscale(var());backdrop-grayscale-[]backdrop-filter: grayscale();예제기본 예제다양한 그레이스케일 강도를 가진 기본 사용 예제입니다:backdrop-grayscale-0 backdrop-gr..

2025. 10. 30. 11:07

front-end

[Tailwind CSS 번역] backdrop-filter: contrast()

Utilities for applying backdrop contrast filters to an element.요소에 배경 대비(contrast) 필터를 적용하기 위한 유틸리티입니다.빠른 참조클래스스타일backdrop-contrast-backdrop-filter: contrast(%);backdrop-contrast-()backdrop-filter: contrast(var());backdrop-contrast-[]backdrop-filter: contrast();예제기본 예제backdrop-contrast-50 및 backdrop-contrast-200과 같은 유틸리티를 사용하여 요소의 배경 대비를 제어할 수 있습니다:backdrop-contrast-50 backdrop-contrast-200 사용..

2025. 10. 30. 11:07

front-end

[Tailwind CSS 번역] backdrop-filter: brightness()

요소에 backdrop brightness 필터를 적용하기 위한 유틸리티입니다.Quick referenceClassStylesbackdrop-brightness-backdrop-filter: brightness(%);backdrop-brightness-()backdrop-filter: brightness(var());backdrop-brightness-[]backdrop-filter: brightness();ExamplesBasic examplebackdrop-brightness-50과 backdrop-brightness-100과 같은 유틸리티를 사용하여 요소의 backdrop brightness를 제어할 수 있습니다:backdrop-brightness-50 backdrop-brightness-150 ..

2025. 10. 30. 11:06

front-end

[Tailwind CSS 번역] backdrop-filter: blur()

요소에 backdrop blur 필터를 적용하기 위한 유틸리티입니다.Quick referenceClassStylesbackdrop-blur-xsbackdrop-filter: blur(var(--blur-xs)); /* 4px */backdrop-blur-smbackdrop-filter: blur(var(--blur-sm)); /* 8px */backdrop-blur-mdbackdrop-filter: blur(var(--blur-md)); /* 12px */backdrop-blur-lgbackdrop-filter: blur(var(--blur-lg)); /* 16px */backdrop-blur-xlbackdrop-filter: blur(var(--blur-xl)); /* 24px */backdrop-bl..

2025. 10. 30. 11:06

front-end

[Tailwind CSS 번역] Mask Size

출처: https://tailwindcss.com/docs/mask-size마스크 이미지 크기를 제어하는 Effects 유틸리티입니다.설명요소의 마스크 이미지 크기를 제어하기 위한 유틸리티입니다.클래스 참조 테이블클래스스타일mask-automask-size: auto;mask-covermask-size: cover;mask-containmask-size: contain;mask-size-()mask-size: var();mask-size-[]mask-size: ;사용 예제컨테이너 채우기mask-cover를 사용하여 마스크 레이어를 채울 때까지 마스크 이미지를 확대하며, 이미지가 잘릴 수 있습니다.잘림 없이 채우기mask-contain을 사용하여 마스크 이미지를 잘리거나 늘어나지 않게 외곽 가장자리까지 확..

2025. 10. 30. 11:04

front-end

[Tailwind CSS 번역] mask-repeat

개요mask-repeat 유틸리티는 요소에서 마스크 이미지가 반복되는 방식을 제어합니다. background-repeat 속성과 유사하게 마스크 반복 동작을 제어할 수 있습니다.빠른 참조클래스스타일mask-repeatmask-repeat: repeat;mask-no-repeatmask-repeat: no-repeat;mask-repeat-xmask-repeat: repeat-x;mask-repeat-ymask-repeat: repeat-y;mask-repeat-spacemask-repeat: space;mask-repeat-roundmask-repeat: round;예제기본 사용법마스크 이미지를 수직 및 수평으로 모두 반복합니다:수평 반복만mask-repeat-x를 사용하여 마스크 이미지를 수평으로만 반..

2025. 10. 30. 11:04

front-end

[Tailwind CSS 번역] mask-position

개요mask-position 유틸리티는 요소의 마스크 이미지 위치를 제어하여 개발자가 요소 내에서 마스크 레이어를 다양한 위치에 배치할 수 있도록 합니다.빠른 참조 테이블클래스스타일mask-top-leftmask-position: top left;mask-topmask-position: top;mask-top-rightmask-position: top right;mask-leftmask-position: left;mask-centermask-position: center;mask-rightmask-position: right;mask-bottom-leftmask-position: bottom left;mask-bottommask-position: bottom;mask-bottom-rightmask-pos..

2025. 10. 30. 11:04

front-end

[Tailwind CSS 번역] mask-origin

개요mask-origin 유틸리티는 요소의 마스크 이미지가 테두리(border), 패딩(padding), 콘텐츠(content)를 기준으로 어떻게 배치되는지 제어합니다.빠른 참조클래스CSS 속성mask-origin-bordermask-origin: border-box;mask-origin-paddingmask-origin: padding-box;mask-origin-contentmask-origin: content-box;mask-origin-fillmask-origin: fill-box;mask-origin-strokemask-origin: stroke-box;mask-origin-viewmask-origin: view-box;기본 예제마스크 origin 유틸리티를 적용하여 마스크가 요소의 박스 모델을..

2025. 10. 30. 11:03