AI 지식

[Tailwind CSS 번역] Font Style

개요Tailwind CSS에서 텍스트의 스타일을 제어하기 위한 유틸리티입니다.빠른 참조클래스CSS 속성italicfont-style: italic;not-italicfont-style: normal;예제텍스트를 이탤릭체로 만들기italic 유틸리티 클래스를 사용하여 텍스트에 이탤릭 스타일을 적용합니다:The quick brown fox jumps over the lazy dog.텍스트를 일반적으로 표시하기not-italic을 사용하여 이탤릭 스타일을 재정의하고 텍스트를 일반 스타일로 표시합니다:The quick brown fox jumps over the lazy dog.반응형 디자인브레이크포인트 접두사와 함께 font-style 유틸리티를 결합하여 특정 화면 크기에서 스타일을 적용합니다:Lorem ip..

2025. 10. 28. 13:15
AI 지식

[Tailwind CSS 번역] Font Weight

개요Tailwind CSS에서 요소의 폰트 굵기를 제어하기 위한 유틸리티입니다.빠른 참조 테이블클래스스타일font-thinfont-weight: 100;font-extralightfont-weight: 200;font-lightfont-weight: 300;font-normalfont-weight: 400;font-mediumfont-weight: 500;font-semiboldfont-weight: 600;font-boldfont-weight: 700;font-extraboldfont-weight: 800;font-blackfont-weight: 900;font-()font-weight: var();font-[]font-weight: ;기본 예제굵기 유틸리티를 적용하여 텍스트 모양을 조정합니다:The ..

2025. 10. 28. 13:15
AI 지식

[Tailwind CSS 번역] Font Variant Numeric

출처: https://tailwindcss.com/docs/font-variant-numeric숫자의 변형을 제어하기 위한 유틸리티입니다.Quick referenceClassStylesnormal-numsfont-variant-numeric: normal;ordinalfont-variant-numeric: ordinal;slashed-zerofont-variant-numeric: slashed-zero;lining-numsfont-variant-numeric: lining-nums;oldstyle-numsfont-variant-numeric: oldstyle-nums;proportional-numsfont-variant-numeric: proportional-nums;tabular-numsfont-var..

2025. 10. 28. 13:14
AI 지식

[Tailwind CSS 번역] Hyphens

개요Tailwind CSS의 hyphens 유틸리티는 텍스트 콘텐츠에서 단어가 줄을 넘어갈 때 어떻게 줄바꿈되고 하이픈이 추가되는지를 제어합니다.사용 가능한 클래스클래스CSS 속성hyphens-nonehyphens: none;hyphens-manualhyphens: manual;hyphens-autohyphens: auto;사용 예제하이픈 방지:hyphens-none 클래스는 마크업에 소프트 하이픈(­)이 있더라도 자동 단어 줄바꿈을 중지합니다.수동 제어:hyphens-manual을 사용하면 지정된 소프트 하이픈 위치에서만 줄바꿈이 발생합니다. 이는 기본 브라우저 동작을 반영합니다.자동 줄바꿈:hyphens-auto를 적용하면 브라우저가 문서의 language 속성에 따라 줄바꿈 지점을 선택하도록..

2025. 10. 28. 13:14
AI 지식

[Tailwind CSS 번역] Letter Spacing

출처: https://tailwindcss.com/docs/letter-spacing요소의 자간(letter spacing) 또는 트래킹을 제어하기 위한 유틸리티입니다.Quick referenceClassStylestracking-tighterletter-spacing: var(--tracking-tighter);/* -0.05em */tracking-tightletter-spacing: var(--tracking-tight);/* -0.025em */tracking-normalletter-spacing: var(--tracking-normal);/* 0em */tracking-wideletter-spacing: var(--tracking-wide);/* 0.025em */tracking-widerlet..

2025. 10. 28. 13:14
AI 지식

[Tailwind CSS 번역] Line Height

출처: https://tailwindcss.com/docs/line-height개요텍스트 요소의 행간(leading, 줄 사이의 수직 간격)을 제어하는 유틸리티입니다.빠른 참조 표클래스스타일text-/font-size: ; line-height: calc(var(--spacing) * );text-/()font-size: ; line-height: var();text-/[]font-size: ; line-height: ;leading-noneline-height: 1;leading-line-height: calc(var(--spacing) * );leading-()line-height: var();leading-[]line-height: ;주요 사용 패턴폰트 크기와 행간 결합:text-sm/6, text..

2025. 10. 28. 13:13
AI 지식

[Tailwind CSS 번역] Line Clamp

출처: https://tailwindcss.com/docs/line-clamp텍스트를 특정 줄 수로 제한하기 위한 유틸리티입니다.Quick referenceClassStylesline-clamp-overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: ;line-clamp-noneoverflow: visible;display: block;-webkit-box-orient: horizontal;-webkit-line-clamp: unset;line-clamp-()overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-cla..

2025. 10. 28. 13:13
AI 지식

[Tailwind CSS 번역] List Style Image

출처: https://tailwindcss.com/docs/list-style-image개요이 페이지는 Tailwind CSS v4.1의 list-style-image 유틸리티를 문서화하며, 리스트 아이템의 마커 이미지를 제어합니다.빠른 참조클래스 구문:list-image-[] → list-style-image: ;list-image-() → list-style-image: var();list-image-none → list-style-image: none;주요 예제기본 사용법:문서에서는 대괄호 표기법 구문을 사용하여 순서 없는 리스트에 커스텀 마커 이미지를 적용하는 방법을 보여줍니다. 예를 들어, list-image-[url(/img/checkmark.png)]는 특정 이미지를 리스트 마커로 설정합니다..

2025. 10. 28. 13:13
AI 지식

[Tailwind CSS 번역] List Style Position

출처: https://tailwindcss.com/docs/list-style-position개요list-style-position 유틸리티는 리스트 아이템 텍스트와 관련하여 리스트 마커(불릿과 숫자)의 배치를 제어합니다.사용 가능한 클래스클래스CSS 속성list-insidelist-style-position: inside;list-outsidelist-style-position: outside;설명이 유틸리티들은 리스트 마커가 리스트 아이템의 콘텐츠 흐름 내부 또는 외부에 나타날지 여부를 관리합니다.기본 예제list-inside마커를 텍스트 흐름 내부에 배치합니다:5 cups chopped Porcini mushrooms1/2 cup of olive oil3lb of celery 5 cups chop..

2025. 10. 28. 13:12
AI 지식

[Tailwind CSS 번역] List Style Type

개요리스트의 마커 스타일을 제어하는 유틸리티입니다.빠른 참조클래스스타일list-disclist-style-type: disc;list-decimallist-style-type: decimal;list-nonelist-style-type: none;list-()list-style-type: var();list-[]list-style-type: ;기본 예제list-disc와 list-decimal 같은 유틸리티를 적용하여 리스트의 마커 스타일을 제어합니다:list-disc Now this is a story all about how, my life got flipped-turned upside down And I'd like to take a minute just sit right there I'll ..

2025. 10. 28. 13:11
AI 지식

[Tailwind CSS 번역] Overflow Wrap

개요overflow-wrap 유틸리티는 넘치는 요소 내에서 단어가 어떻게 줄바꿈되는지를 제어합니다. Tailwind는 이 CSS 속성에 대해 세 가지 클래스를 제공합니다.사용 가능한 클래스클래스CSS 속성wrap-break-wordoverflow-wrap: break-word;wrap-anywhereoverflow-wrap: anywhere;wrap-normaloverflow-wrap: normal;사용 예제단어 중간에서 줄바꿈wrap-break-word 클래스는 필요할 때 글자 사이에서 줄바꿈을 허용합니다:The longest word in any of the major...어디서나 줄바꿈wrap-anywhere 유틸리티는 wrap-break-word와 유사하게 작동하지만 단어 중간의 줄바꿈을 요소의 ..

2025. 10. 28. 13:10
AI 지식

[Tailwind CSS 번역] Text Indent

출처: https://tailwindcss.com/docs/text-indent개요text-indent 유틸리티는 블록 요소 내의 텍스트 앞에 표시되는 빈 공간의 양을 제어합니다.사용 가능한 클래스클래스CSSindent-text-indent: calc(var(--spacing) * );-indent-text-indent: calc(var(--spacing) * -);indent-pxtext-indent: 1px;-indent-pxtext-indent: -1px;indent-()text-indent: var();indent-[]text-indent: ;사용 예제기본 들여쓰기indent-8을 적용하여 텍스트를 간격 배율 8만큼 들여씁니다:So I started to walk into the water...음..

2025. 10. 28. 13:10
AI 지식

[Tailwind CSS 번역] Text Overflow

출처: https://tailwindcss.com/docs/text-overflow개요이 페이지는 요소 내에서 텍스트가 오버플로우되는 방식을 제어하기 위한 Tailwind CSS 유틸리티를 문서화합니다.사용 가능한 클래스truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-ellipsistext-overflow: ellipsis;text-cliptext-overflow: clip;사용 예제텍스트 자르기truncate 유틸리티는 텍스트 줄바꿈을 방지하고 콘텐츠가 경계를 초과할 때 말줄임표(…)를 추가합니다.사용법:The longest word in any of the major English language dictionar..

2025. 10. 28. 13:10
AI 지식

[Tailwind CSS 번역] Text Wrap

출처: https://tailwindcss.com/docs/text-wrap개요text-wrap 유틸리티는 요소 내에서 텍스트가 줄바꿈되는 방식을 제어합니다. Tailwind CSS의 Typography 유틸리티의 일부입니다.사용 가능한 클래스클래스CSS 속성text-wraptext-wrap: wrap;text-nowraptext-wrap: nowrap;text-balancetext-wrap: balance;text-prettytext-wrap: pretty;사용 예제텍스트 줄바꿈 허용 (text-wrap)논리적인 중단점에서 텍스트가 여러 줄로 줄바꿈되도록 합니다. 예제는 제목과 단락 텍스트가 자연스럽게 줄바꿈되는 기사를 보여줍니다. 제목 단락 텍스트가 자연스럽게 줄바꿈됩니다.줄바꿈 방지 (text-..

2025. 10. 28. 13:09
AI 지식

[Tailwind CSS 번역] Text Align

개요text-align 유틸리티는 요소 내에서 텍스트가 정렬되는 방식을 제어합니다.사용 가능한 클래스클래스CSS 속성text-lefttext-align: left;text-centertext-align: center;text-righttext-align: right;text-justifytext-align: justify;text-starttext-align: start;text-endtext-align: end;사용 예제왼쪽 정렬text-left를 적용하여 콘텐츠를 왼쪽 가장자리에 배치합니다:So I started to walk into the water...오른쪽 정렬text-right를 사용하여 텍스트를 오른쪽으로 정렬합니다:So I started to walk into the water...가운데..

2025. 10. 28. 13:09
반응형