Tailwind CSS Academy · 강의

비활성화 및 자리 표시자 변형

disabled:*로 비활성화된 폼 요소를 스타일링하고, placeholder:* 변형으로 자리 표시자 텍스트의 모양을 사용자 지정합니다.

레슨 3/413개 단계

비활성화 및 자리 표시자 변형은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

폼 상태 스타일링

폼 요소에는 기본 상태와 포커스 상태 외에도 여러 상태가 있습니다. 입력 요소가 비활성화되면 시각적으로 구분되어 상호 작용할 수 없음을 알려야 합니다. 비어 있을 때는 자리 표시자 텍스트가 사용자가 입력해야 할 내용을 안내합니다. Tailwind는 사용자 지정 CSS 규칙 없이 HTML에서 이러한 특정 상태를 선언적으로 스타일링할 수 있도록 disabled: 및 placeholder: 변형 접두사를 제공합니다.

<!-- Disabled and placeholder states side by side -->
<div class="space-y-3 max-w-sm">
  <input type="text" placeholder="Type something here" class="w-full border rounded px-3 py-2 placeholder:text-gray-400" />
  <input type="text" placeholder="Read only" disabled class="w-full border rounded px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100" />
</div>

disabled: 변형 기본

disabled: 변형은 폼 요소에 HTML disabled 속성이 있을 때 적용됩니다. 가장 일반적인 스타일링 패턴은 disabled:opacity-50 disabled:cursor-not-allowed입니다. 불투명도를 낮춰 사용할 수 없음을 나타내고 커서를 차단 아이콘으로 바꿔 혼동을 방지합니다. disabled:bg-gray-100을 추가하여 비활성화된 입력 요소에 읽기 전용임을 강조하는 구별되는 배경색을 지정할 수도 있습니다.

<!-- Disabled form inputs with clear visual treatment -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    value="Active input"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
  />

  <input
    type="text"
    value="Disabled input"
    disabled
    class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400"
  />
</div>

버튼의 disabled:

비활성화된 버튼은 해당 작업을 사용할 수 없다는 점을 명확하게 전달해야 합니다. disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none 패턴은 회색으로 표시되고 사용할 수 없음 커서를 보여 주며 JavaScript가 있어도 클릭에 반응하지 않는 접근성 높은 비활성화 버튼을 만듭니다. disabled:pointer-events-none을 추가하면 비활성화된 버튼에 마우스를 올렸을 때 효과가 표시되지 않습니다.

<!-- Enabled vs disabled button states -->
<div class="flex gap-4 flex-wrap">
  <button
    class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
  >
    Active Button
  </button>

  <button
    disabled
    class="bg-blue-600 hover:bg-blue-700 active:scale-95 text-white px-5 py-2.5 rounded-lg font-medium transition-all disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none"
  >
    Disabled Button
  </button>
</div>

선택 상자 및 기타 컨트롤의 disabled:

disabled: 변형은 disabled 속성을 가질 수 있는 모든 HTML 요소에서 작동합니다. 여기에는 입력 요소, 선택 상자, 여러 줄 입력 영역, 버튼, 옵션 그룹 및 필드셋이 포함됩니다. fieldset에 disabled를 지정하면 모든 하위 폼 컨트롤이 비활성화 상태를 상속하지만, Tailwind의 변형은 직접 요소에만 적용됩니다. 따라서 자식 요소가 아니라 필드셋에 disabled:* 유틸리티를 추가해야 합니다.

<!-- Disabled select and textarea -->
<div class="space-y-3 max-w-sm">
  <select
    disabled
    class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
  >
    <option>Select country...</option>
    <option>United States</option>
  </select>

  <textarea
    disabled
    rows="3"
    placeholder="Notes (locked)"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 resize-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
  ></textarea>
</div>

placeholder: 변형 기본

placeholder: 변형은 입력 요소와 여러 줄 입력 영역 내부의 자리 표시자 텍스트를 스타일링합니다. 사용자 지정 없이 사용하면 자리 표시자 텍스트는 불투명도가 낮아진 입력 요소의 텍스트 색상을 상속합니다. 일반적인 사용자 지정으로는 더 연한 회색을 위한 placeholder:text-gray-400, 더 작은 자리 표시자 텍스트를 위한 placeholder:text-sm, 안내 문구를 실제 입력 내용과 시각적으로 구분하기 위한 placeholder:italic이 있습니다.

<!-- Customized placeholder text styles -->
<div class="space-y-3 max-w-sm">
  <!-- Default placeholder -->
  <input type="text" placeholder="Default placeholder" class="w-full border rounded px-3 py-2" />

  <!-- Styled placeholder -->
  <input
    type="text"
    placeholder="Styled placeholder"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 placeholder:text-sm placeholder:italic"
  />

  <!-- Colored placeholder for category input -->
  <input
    type="text"
    placeholder="Search products..."
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
</div>

placeholder:와 포커스 결합

세련된 사용자 경험을 위한 한 가지 패턴은 입력 요소에 포커스가 있을 때 자리 표시자 텍스트가 사라지거나 바뀌도록 하는 것입니다. 그러면 입력을 시작할 수 있다는 시각적 확인을 제공할 수 있습니다. placeholder:text-gray-400 focus:placeholder:text-gray-300 조합은 포커스가 있을 때 자리 표시자 텍스트를 약간 흐리게 하여 커서에 주의를 유도하는 미묘한 효과를 냅니다. 일부 디자인에서는 focus:placeholder:opacity-0을 사용하여 포커스 시 자리 표시자를 완전히 숨깁니다.

<!-- Placeholder fades on focus -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    placeholder="Click here — placeholder fades"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:placeholder:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
  />
</div>

검색 및 필터의 placeholder:

검색 입력 요소와 필터 필드는 자리 표시자 텍스트를 기본 레이블로 사용하는 경우가 많습니다. 특히 별도의 레이블을 배치하면 공간을 너무 많이 차지하는 좁은 UI에서 유용합니다. 이러한 요소에는 좋은 대비를 위해 placeholder:text-gray-500를 적용하고 자리 표시자 옆에 아이콘을 추가하는 것도 고려해 보세요. pl-10 placeholder:text-sm 패턴은 입력 요소 안에 절대 위치로 배치할 검색 아이콘을 위한 공간을 확보합니다.

<!-- Search input with icon and styled placeholder -->
<div class="relative max-w-sm">
  <!-- Search icon -->
  <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11A6 6 0 111 11a6 6 0 0116 0z" />
    </svg>
  </div>
  <input
    type="search"
    placeholder="Search by name, email..."
    class="w-full border border-gray-300 rounded-xl pl-10 pr-4 py-2.5 placeholder:text-gray-400 placeholder:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
  />
</div>

입력 요소가 아닌 요소의 비활성화 스타일

CSS :disabled 의사 클래스는 기술적으로 폼 요소에만 적용됩니다. 비활성화된 목록 항목이나 회색으로 표시된 카드처럼 다른 요소도 비활성화된 것처럼 보이게 하려면 aria-disabled를 기준으로 사용하고 Tailwind의 aria-disabled: 변형 또는 조건부 CSS 클래스로 스타일링하세요. 또는 Tailwind에서 [&[aria-disabled=true]]: 임의 변형 구문을 사용하여 정확한 대상을 지정할 수도 있습니다.

<!-- Making non-form elements look disabled -->
<div class="space-y-3">
  <!-- Subscription card: disabled with aria-disabled -->
  <div
    aria-disabled="true"
    class="border border-gray-200 rounded-xl p-4 opacity-50 cursor-not-allowed select-none"
  >
    <h3 class="font-bold text-gray-500">Enterprise Plan</h3>
    <p class="text-sm text-gray-400">Contact sales to enable</p>
  </div>

  <!-- Active card for comparison -->
  <div class="border border-blue-200 rounded-xl p-4 cursor-pointer hover:border-blue-400">
    <h3 class="font-bold">Pro Plan</h3>
    <p class="text-sm text-gray-500">$29/month</p>
  </div>
</div>

로딩 및 대기 상태

폼 요소는 비활성화 상태 외에도 비동기 작업이 완료될 때까지 로딩 상태가 필요할 수 있습니다. Tailwind에는 기본 제공 loading: 변형이 없지만 조건부 클래스 적용으로 이를 구현할 수 있습니다. 스피너와 pointer-events-none opacity-75가 표시되는 버튼은 작업이 진행 중임을 전달합니다. 여기에 SVG 스피너의 animate-spin을 결합하면 해당 상태를 분명하게 나타낼 수 있습니다.

<!-- Loading state on a submit button -->
<div class="flex gap-4">
  <!-- Loading state (simulate with always-applied classes) -->
  <button
    class="flex items-center gap-2 bg-blue-600 text-white px-5 py-2.5 rounded-lg font-medium opacity-75 pointer-events-none"
  >
    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
    </svg>
    Saving...
  </button>

  <!-- Normal state -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg font-medium">
    Save Changes
  </button>
</div>

placeholder: 모범 사례

몇 가지 중요한 지침이 있습니다. 입력 요소의 유일한 레이블로 placeholder를 사용하지 마세요. 입력을 시작하면 사라지므로 WCAG 1.3.5(입력 목적 식별)를 위반합니다. placeholder는 표시되는 레이블과 함께 보조 안내 텍스트로 사용하세요. 또한 자리 표시자 텍스트는 일반 텍스트보다 대비가 낮은 경우가 많으므로, 입력 요소가 비어 있고 자리 표시자가 사용자의 유일한 안내일 때 placeholder:text-* 색상이 WCAG AA에서 요구하는 4.5:1 대비 비율을 충족하는지 확인하세요.

<!-- Best practice: label + placeholder as hint -->
<div class="max-w-sm space-y-4">
  <div>
    <!-- Visible label: always shown -->
    <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
    <!-- Placeholder: supplementary hint, not the only label -->
    <input
      type="text"
      placeholder="e.g. john_doe"
      class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
    />
    <p class="text-xs text-gray-400 mt-1">Letters, numbers, and underscores only</p>
  </div>
</div>

모든 상태를 적용한 완전한 폼

다음은 비활성화, 자리 표시자, 포커스 및 오류 상태 스타일을 함께 적용한 완전한 로그인 폼입니다. 사용자가 마주칠 수 있는 모든 상태를 처리하는 실무 수준의 폼은 이러한 형태입니다. 각 입력 요소에는 레이블, 자리 표시자 안내, 포커스 링이 있으며 비활성화된 필드는 회색으로 표시됩니다. 제출 버튼은 호버 및 활성 스타일을 적용할 수 있도록 활성화된 상태로 표시됩니다.

<form class="max-w-sm space-y-4 p-6">
  <div>
    <label class="block text-sm font-medium mb-1">Email</label>
    <input type="email" placeholder="you@example.com" class="w-full border border-gray-300 rounded-lg px-4 py-2 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
  </div>
  <div>
    <label class="block text-sm font-medium mb-1">Account ID</label>
    <input type="text" value="ACC-12345" disabled class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed" />
    <p class="text-xs text-gray-400 mt-1">Account ID cannot be changed</p>
  </div>
  <button class="w-full bg-blue-600 hover:bg-blue-700 active:bg-blue-800 active:scale-95 text-white py-2.5 rounded-lg font-semibold transition-all">
    Update Profile
  </button>
</form>

빠른 확인

이 레슨에서 배운 Tailwind CSS 숙련도 개념을 얼마나 이해했는지 테스트해 보세요.

인터랙티브 레슨에서 답해보세요

레슨 요약

이 레슨에서는 다음을 배웠습니다. HTML disabled 속성이 있으면 disabled:가 폼 요소를 스타일링합니다. placeholder:는 입력 요소 내부의 자리 표시자 텍스트 색상, 크기 및 스타일을 대상으로 합니다. 또한 disabled:opacity-50, disabled:cursor-not-allowed 및 disabled:pointer-events-none을 결합하면 완전한 비활성화 버튼 패턴이 만들어집니다. 다음으로 부모-자식 및 형제 요소 간 상호 작용을 위한 강력한 group 및 peer 변형을 살펴보겠습니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“비활성화 및 자리 표시자 변형” 강의는 무료인가요?

네 — “비활성화 및 자리 표시자 변형” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“비활성화 및 자리 표시자 변형”에서 뭘 배우나요?

disabled:*로 비활성화된 폼 요소를 스타일링하고, placeholder:* 변형으로 자리 표시자 텍스트의 모양을 사용자 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“비활성화 및 자리 표시자 변형” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기