기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 텍스트 영역입니다. 크기 xs-xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Textarea 구성 요소는 사용자의 여러 줄 텍스트 입력을 캡처하므로 메시지, 설명, 설명 및 긴 형식의 콘텐츠에 적합합니다. 기본 HTML 텍스트 영역 요소로 구축되고 Tailwind CSS 스타일로 강화된 텍스트 영역은 다양한 크기, 색상 및 상태를 지원합니다. 접근 가능하고 완벽하게 사용자 정의가 가능하며 양식 및 커뮤니케이션 인터페이스에 원활하게 통합됩니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| textarea | 베이스 | 스타일이 지정된 여러 줄 텍스트 입력 |
| textarea-soft | 스타일 | 음소거된 색조 배경 |
| textarea-ghost | 스타일 | 초점이 맞춰질 때까지 테두리가 보이지 않음 |
| textarea-dashed | 스타일 | 점선 테두리 스타일 |
| textarea-xs | 크기 | 아주 작은 |
| textarea-sm | 크기 | 작은 |
| textarea-md | 크기 | 중간(기본값) |
| textarea-lg | 크기 | 크기가 큰 |
| textarea-xl | 크기 | 특대 |
| textarea-2xl | 크기 | 2× 특대형 |
| textarea-primary | 색상 | 기본 테마 색상 테두리 |
| textarea-secondary | 색상 | 보조 테마 색상 테두리 |
| textarea-accent | 색상 | 악센트 테마 색상 테두리 |
| textarea-neutral | 색상 | 중립 테마 색상 테두리 |
| textarea-info | 색상 | 정보 의미 색상 테두리 |
| textarea-success | 색상 | 성공 의미 색상 테두리 |
| textarea-warning | 색상 | 경고 의미 색상 테두리 |
| textarea-error | 색상 | 오류 의미 색상 테두리 |
기본 사용법
<textarea class="textarea" placeholder="Enter your message here..."></textarea> |
<textarea className="textarea" placeholder="Enter your message here..."></textarea> |
텍스트 영역 크기
1 2 3 4 5 6 7 8 9 10 11 | <textarea class="textarea textarea-xs" placeholder="Extra Small"></textarea> <textarea class="textarea textarea-sm" placeholder="Small"></textarea> <textarea class="textarea textarea-md" placeholder="Medium"></textarea> <textarea class="textarea textarea-lg" placeholder="Large"></textarea> <textarea class="textarea textarea-xl" placeholder="Extra Large"></textarea> <textarea class="textarea textarea-2xl" placeholder="2X Large"></textarea> |
텍스트 영역 색상
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <textarea class="textarea" placeholder="Default"></textarea> <textarea class="textarea textarea-primary" placeholder="Primary"></textarea> <textarea class="textarea textarea-secondary" placeholder="Secondary"></textarea> <textarea class="textarea textarea-accent" placeholder="Accent"></textarea> <textarea class="textarea textarea-info" placeholder="Info"></textarea> <textarea class="textarea textarea-success" placeholder="Success"></textarea> <textarea class="textarea textarea-warning" placeholder="Warning"></textarea> <textarea class="textarea textarea-error" placeholder="Error"></textarea> |
텍스트 영역 스타일
1 2 3 4 5 6 7 | <textarea class="textarea" placeholder="Default style"></textarea> <textarea class="textarea textarea-soft" placeholder="Soft style"></textarea> <textarea class="textarea textarea-dashed" placeholder="Dashed style"></textarea> <textarea class="textarea textarea-ghost" placeholder="Ghost style"></textarea> |
비활성화된 텍스트 영역
1 2 3 | <textarea class="textarea" placeholder="Enabled textarea"></textarea> <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea> |
라벨이 있는 텍스트 영역
1 2 3 4 | <label> <span>Your feedback</span> <textarea class="textarea w-full" placeholder="Share your thoughts..."></textarea> </label> |
문자 수가 포함된 텍스트 영역
1 2 3 4 5 | <label> <span>Write a message (max 200 characters)</span> <textarea class="textarea w-full" placeholder="Type here..." maxlength="200"></textarea> <span>Characters remaining</span> </label> |
고급 마크다운 편집기
markdown-text-editor를 사용하여 모든 텍스트 영역을 전체 마크다운 편집기로 전환하세요.
plain(원시 Markdown 구문) 및 hybrid(입력 시 실시간으로 서식 지정 렌더링)의 두 가지 모드를 사용할 수 있습니다.
더 많은 구성 옵션을 보려면 플러그인 docs를 참조하세요.
일반 모드
원시 Markdown 구문을 표시합니다. 사용자는 텍스트 영역에 Markdown을 직접 작성합니다.
<textarea id="plain-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#plain-markdown-editor'); |
하이브리드 모드
입력하는 대로 서식을 실시간으로 렌더링합니다. 굵게, 제목, 목록 등이 인라인 스타일로 표시됩니다.
<textarea id="hybrid-markdown-editor" name="content"></textarea> |
1 2 3 | import MarkdownEditor from "markdown-text-editor"; new MarkdownEditor('#hybrid-markdown-editor', { mode: 'hybrid' }); |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 텍스트 영역 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.