AI 지식

[Tailwind CSS 번역] Forced Color Adjust

forced color 모드에서 요소가 색상 조정에 응답하는 방식을 제어하기 위한 유틸리티입니다.출처: https://tailwindcss.com/docs/forced-color-adjust기본 사용법Forced color 비활성화하기forced-color-adjust-none 유틸리티를 사용하여 특정 요소에 대한 forced color 제약을 비활성화할 수 있습니다.이는 제한된 색상 팔레트가 사용성을 저해하는 경우에 유용합니다. 예를 들어, 흰색, 회색, 검은색 옵션을 표시하는 색상 선택기 인터페이스의 경우입니다. 색상 선택 흰색 회색 검은색 Forced color 복원하기forced-color..

2025. 11. 4. 18:26

AI 지식

[Tailwind CSS 번역] Stroke

SVG 요소의 stroke(윤곽선) 스타일링을 위한 유틸리티입니다.출처: https://tailwindcss.com/docs/stroke기본 사용법색상 설정하기stroke-indigo-500과 같은 유틸리티를 사용하여 SVG의 stroke 색상을 변경할 수 있습니다. 이는 Heroicons과 같은 아이콘 세트를 스타일링할 때 매우 유용합니다.현재 색상 사용하기stroke-current 유틸리티를 사용하여 stroke 색상을 현재 텍스트 색상으로 설정할 수 있습니다. 이를 통해 hover 시 색상이 변경되는 아이콘 버튼과 같은 요소를 쉽게 만들 수 있습니다. 조건부 적용Hover, focus 및 기타 상태Tailwind를 사용하면 유틸리티 클래스를 조건부로 다른 상태에서 적용할 수 있습니다...

2025. 11. 4. 18:26

AI 지식

[Tailwind CSS 번역] Stroke Width

SVG 요소의 stroke width(윤곽선 두께)를 제어하기 위한 유틸리티입니다.출처: https://tailwindcss.com/docs/stroke-width기본 사용법Stroke width 설정하기stroke-1 및 stroke-2와 같은 유틸리티를 사용하여 SVG의 stroke width를 제어할 수 있습니다. 이는 Heroicons과 같은 아이콘 세트를 스타일링할 때 매우 유용합니다.조건부 적용Hover, focus 및 기타 상태Tailwind를 사용하면 유틸리티 클래스를 조건부로 다른 상태에서 적용할 수 있습니다.예를 들어, hover:stroke-2를 사용하여 hover 시에만 stroke-2 유틸리티를 적용할 수 있습니다. 전체 목록은 Hover, Focus, 및 기타 상태 문서를..

2025. 11. 4. 18:26

AI 지식

[Tailwind CSS 번역] Fill

SVG 요소의 fill 스타일링을 위한 유틸리티입니다.출처: https://tailwindcss.com/docs/fill기본 사용법색상 설정하기fill-indigo-500 및 fill-lime-600과 같은 유틸리티를 사용하여 SVG의 fill 색상을 변경할 수 있습니다. 이는 Heroicons과 같은 아이콘 세트를 스타일링할 때 매우 유용합니다.조건부 적용Hover, focus 및 기타 상태Tailwind를 사용하면 유틸리티 클래스를 조건부로 다른 상태에서 적용할 수 있습니다.예를 들어, hover:fill-cyan-700을 사용하여 hover 시에만 fill-cyan-700 유틸리티를 적용할 수 있습니다. 전체 목록은 Hover, Focus, 및 기타 상태 문서를 참조하세요.중단점 및 미디어 ..

2025. 11. 4. 18:25

AI 지식

[Tailwind CSS 번역] Will Change

개요will-change 유틸리티는 애니메이션이 시작되기 전에 브라우저가 필요한 변경 사항을 준비하도록 지시하여 향후 애니메이션을 최적화합니다.사용 가능한 클래스클래스CSS 속성will-change-autowill-change: auto;will-change-scrollwill-change: scroll-position;will-change-contentswill-change: contents;will-change-transformwill-change: transform;will-change-will-change: var();will-change-[]will-change: ;주요 사용 지침성능 최적화: 요소가 변경되기 직전에 이러한 유틸리티를 적용한 다음 will-change-auto를 사용하여 완료된 ..

2025. 11. 4. 18:25

AI 지식

[Tailwind CSS 번역] User Select

개요user-select 유틸리티는 사용자가 요소의 텍스트를 선택할 수 있는지 여부를 제어합니다.빠른 참조 표클래스CSS 속성select-noneuser-select: none;select-textuser-select: text;select-alluser-select: all;select-autouser-select: auto;사용 예제텍스트 선택 비활성화select-none 클래스는 요소와 그 자식 요소에서 텍스트 선택을 방지합니다:The quick brown fox jumps over the lazy dog.텍스트 선택 활성화select-text 유틸리티는 요소와 그 자식 요소에서 텍스트 선택을 허용합니다:The quick brown fox jumps over the lazy dog.클릭 시 모든 텍..

2025. 11. 4. 18:24

AI 지식

[Tailwind CSS 번역] Touch Action

개요touch-action 유틸리티는 터치스크린에서 요소가 터치 제스처에 반응하는 방식을 제어하며, 스크롤(패닝) 및 확대/축소(핀칭)를 포함합니다.사용 가능한 클래스클래스CSS 속성touch-autotouch-action: auto;touch-nonetouch-action: none;touch-pan-xtouch-action: pan-x;touch-pan-lefttouch-action: pan-left;touch-pan-righttouch-action: pan-right;touch-pan-ytouch-action: pan-y;touch-pan-uptouch-action: pan-up;touch-pan-downtouch-action: pan-down;touch-pinch-zoomtouch-action: ..

2025. 11. 4. 18:24

AI 지식

[Tailwind CSS 번역] Scroll Snap Type

빠른 참조scroll-snap-type 유틸리티는 스냅 컨테이너에서 스냅 포인트가 얼마나 엄격하게 적용되는지를 제어합니다.사용 가능한 클래스:클래스CSSsnap-nonescroll-snap-type: none;snap-xscroll-snap-type: x var(--tw-scroll-snap-strictness);snap-yscroll-snap-type: y var(--tw-scroll-snap-strictness);snap-bothscroll-snap-type: both var(--tw-scroll-snap-strictness);snap-mandatory--tw-scroll-snap-strictness: mandatory;snap-proximity--tw-scroll-snap-strictness: pr..

2025. 11. 4. 18:24

AI 지식

[Tailwind CSS 번역] Scroll Snap Stop

개요scroll-snap-stop 유틸리티는 스크롤 컨테이너가 스냅 위치를 건너뛸 수 있는지 여부를 제어합니다.사용 가능한 클래스클래스CSS 속성snap-normalscroll-snap-stop: normal;snap-alwaysscroll-snap-stop: always;사용 예제스냅 위치 정지 강제하기snap-always를 snap-mandatory와 함께 적용하면 추가 스크롤을 허용하기 전에 컨테이너가 각 스냅 지점에서 멈추도록 보장합니다: 스냅 위치 정지 건너뛰기snap-normal을 사용하여 스크롤 컨테이너가 스냅 위치를 건너뛸 수 있도록 허용합니다: 반응형 디자인브레이크포인트 변형(예: md:snap-normal)과 결합하여 다양한 화면 크기에서 동작을 조정할 ..

2025. 11. 4. 18:24

AI 지식

[Tailwind CSS 번역] Scroll Snap Align

개요scroll-snap-align 유틸리티는 snap 컨테이너 내에서 스크롤될 때 요소가 정렬 위치에 스냅되는 방식을 제어합니다.사용 가능한 클래스클래스CSS 속성snap-startscroll-snap-align: start;snap-endscroll-snap-align: end;snap-centerscroll-snap-align: center;snap-align-nonescroll-snap-align: none;사용 예제중앙 정렬: 스크롤 가능한 요소를 보이는 뷰포트 내에서 중간 지점에 정렬하려면 snap-center를 적용합니다.시작 정렬: 스크롤 컨테이너의 시작 부분에 요소를 배치하려면 snap-start를 사용합니다.끝 정렬: 컨테이너의 끝 가장자리에 요소를 정렬하려면 snap-end를 적용합니..

2025. 11. 4. 18:23

AI 지식

[Tailwind CSS 번역] Scroll Padding

개요scroll-padding 유틸리티는 snap 컨테이너 내에서 요소의 스크롤 오프셋을 제어하며, 스크롤된 콘텐츠와 컨테이너 가장자리 사이의 간격을 관리합니다.클래스 참조주요 클래스:scroll-p- → scroll-padding: calc(var(--spacing) * )scroll-px- → scroll-padding-inlinescroll-py- → scroll-padding-blockscroll-ps- → scroll-padding-inline-startscroll-pe- → scroll-padding-inline-endscroll-pt-, scroll-pr-, scroll-pb-, scroll-pl- → 방향별 변형변형: 음수 값(- 접두사), 사용자 정의 속성, 그리고 임의의 값([])이 지..

2025. 11. 4. 18:23

AI 지식

[Tailwind CSS 번역] Scroll Margin

개요scroll-margin 유틸리티는 snap 컨테이너 내의 항목 주변의 스크롤 오프셋을 제어하며, 스크롤 중 요소가 뷰에 스냅될 때의 간격을 관리합니다.빠른 참조클래스 구문scroll-m-: spacing 배수를 사용하여 scroll-margin 설정-scroll-m-: 음수 scroll margin 값 적용scroll-m-(): CSS 사용자 정의 속성 사용scroll-m-[]: 임의의 값 허용방향별 변형Inline: scroll-mx-, scroll-ms-, scroll-me-Block: scroll-my-개별: scroll-mt-, scroll-mr-, scroll-mb-, scroll-ml-핵심 예제기본 구현:수평 스크롤 컨테이너 내에서 snap-aligned 항목에 scroll-ml-6를 적..

2025. 11. 3. 11:21

AI 지식

[Tailwind CSS 번역] Scroll Behavior

출처: https://tailwindcss.com/docs/scroll-behavior개요scroll-behavior 유틸리티는 브라우저에 의해 트리거될 때 요소가 스크롤되는 방식을 제어합니다. 이 기능은 Tailwind CSS의 상호작용(Interactivity) 섹션의 일부입니다.사용 가능한 클래스클래스CSS 속성scroll-autoscroll-behavior: auto;scroll-smoothscroll-behavior: smooth;사용 예제부드러운 스크롤scroll-smooth 클래스를 적용하여 애니메이션 스크롤을 활성화합니다: 참고: scroll-behavior 속성은 브라우저에 의해 시작된 스크롤 이벤트에만 영향을 미치며, 모든 스크롤 상호작용에 영향을 미치지는 않습니다.기본 브라우저 동작..

2025. 11. 3. 11:20

AI 지식

[Tailwind CSS 번역] Resize

출처: https://tailwindcss.com/docs/resize개요resize 유틸리티는 사용자가 HTML 요소의 크기를 조정할 수 있는 방법을 제어합니다. 특히 textarea와 같은 폼 요소에 유용합니다.사용 가능한 클래스클래스CSS 속성resize-noneresize: none;resizeresize: both;resize-yresize: vertical;resize-xresize: horizontal;사용 예제양방향 크기 조정:resize 클래스는 사용자가 요소의 크기를 수평 및 수직으로 모두 조정할 수 있도록 하며, 일반적으로 textarea 요소에 적용됩니다.수직 방향만 크기 조정:resize-y를 적용하여 너비는 고정된 상태로 유지하면서 높이만 조정할 수 있도록 허용합니다.수평 방향만..

2025. 11. 3. 11:20

AI 지식

[Tailwind CSS 번역] Pointer Events

출처: https://tailwindcss.com/docs/pointer-events개요이 문서는 Tailwind CSS의 pointer-events 유틸리티 클래스에 대해 다룹니다. 이 클래스는 요소가 포인터 상호작용에 응답할지 여부를 제어합니다.사용 가능한 클래스클래스CSS 속성pointer-events-autopointer-events: auto;pointer-events-nonepointer-events: none;주요 개념포인터 이벤트 무시하기pointer-events-none 유틸리티는 요소가 hover 및 click 이벤트와 같은 포인터 상호작용에 응답하지 않도록 합니다. 이는 하위 콘텐츠에 대한 사용자 상호작용을 방해해서는 안 되는 오버레이 요소에 유용합니다.중요 참고사항: "포인터 이벤트..

2025. 11. 3. 11:20

AI 지식

[Tailwind CSS 번역] field-sizing

출처: https://tailwindcss.com/docs/field-sizingInteractivityfield-sizingform control의 크기 조정을 제어하기 위한 유틸리티입니다.빠른 참조ClassStylesfield-sizing-fixedfield-sizing: fixed;field-sizing-contentfield-sizing: content;Examples콘텐츠 기반 크기 조정field-sizing-content 유틸리티를 사용하여 form control이 콘텐츠를 기반으로 크기를 조정하도록 허용합니다:아래 입력란에 입력하여 크기 변경을 확인하세요Latex Salesman, Vanderlay Industries고정 크기 사용하기field-sizing-fixed 유틸리티를 사용하여 fo..

2025. 11. 3. 11:19

AI 지식

[Tailwind CSS 번역] cursor

출처: https://tailwindcss.com/docs/cursorInteractivitycursor요소 위에 마우스를 올렸을 때 cursor 스타일을 제어하기 위한 유틸리티입니다.빠른 참조ClassStylescursor-autocursor: auto;cursor-defaultcursor: default;cursor-pointercursor: pointer;cursor-waitcursor: wait;cursor-textcursor: text;cursor-movecursor: move;cursor-helpcursor: help;cursor-not-allowedcursor: not-allowed;cursor-nonecursor: none;cursor-context-menucursor: context-me..

2025. 11. 3. 11:19

AI 지식

[Tailwind CSS 번역] color-scheme

출처: https://tailwindcss.com/docs/color-schemeInteractivitycolor-scheme요소의 color scheme을 제어하기 위한 유틸리티입니다.빠른 참조ClassStylesscheme-normalcolor-scheme: normal;scheme-darkcolor-scheme: dark;scheme-lightcolor-scheme: light;scheme-light-darkcolor-scheme: light dark;scheme-only-darkcolor-scheme: only dark;scheme-only-lightcolor-scheme: only light;Examples기본 예제scheme-light 및 scheme-light-dark와 같은 유틸리티를 사용..

2025. 11. 3. 11:19

AI 지식

[Tailwind CSS 번역] Caret Color

Interactivity텍스트 입력 커서의 색상을 제어하기 위한 유틸리티입니다.빠른 참조ClassStylescaret-inheritcaret-color: inherit;caret-currentcaret-color: currentColor;caret-transparentcaret-color: transparent;caret-blackcaret-color: var(--color-black); /* #000 */caret-whitecaret-color: var(--color-white); /* #fff */caret-red-50caret-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */caret-red-100caret-color: var(--color-r..

2025. 11. 3. 11:18

AI 지식

[Tailwind CSS 번역] Appearance

Interactivity네이티브 폼 컨트롤 스타일링을 제거하기 위한 유틸리티입니다.빠른 참조ClassStylesappearance-noneappearance: none;appearance-autoappearance: auto;예제기본 appearance 제거하기appearance-none을 사용하여 요소의 브라우저별 스타일링을 초기화할 수 있습니다:Default browser styles appliedYesNoMaybeRemove default browser stylesYesNoMaybe Yes No Maybe Yes No Maybe 이 유틸리티는 커스텀 폼 컴포넌트를 만들 때 자주 사용됩니다.기본 appearance 복원하기appearance-auto를 사용하여..

2025. 11. 3. 11:18