minstudio

그림자, 테두리, 라운드 효과 | Minstudio

그림자, 테두리, 라운드 효과

디테일이 살아있는 프리미엄 카드 디자인의 핵심 삼총사

웹 UI의 완성도를 200% 올려주는 숨은 공신은 바로 미세한 **둥근 모서리(Border-Radius)**와 부드럽게 퍼지는 **그림자(Box-Shadow)**, 그리고 정교한 **윤곽 테두리(Border)**의 상호 조합입니다. Tailwind CSS는 입체감 넘치는 컴포넌트 디자인을 한 줄로 소화해냅니다.

⚠️ 주의: border 단독 선언 시 테두리가 보이지 않는 현상

자주 저지르는 실수로, 윤곽선 색상 border-slate-700만 적어놓고 두께선인 border 선언을 빼먹으면 테두리가 렌더링되지 않습니다. 반드시 두께(border)를 명시한 뒤 색상(border-slate-700)을 덧붙이는 구조를 쌍으로 갖추어야 정상 표시됩니다.

디자인 특성	기본 적용 접두사	대표적인 수치 범위 스케일
모서리 곡률 (Radius)	`rounded-`	`rounded-sm` (2px), `rounded-md` (6px), `rounded-2xl` (16px), `rounded-full` (100% 원)
입체 그림자 (Shadow)	`shadow-`	`shadow-sm` (미세함), `shadow-md` (보통), `shadow-2xl` (입체 레이어), `shadow-inner` (안쪽 음각)
테두리 선 (Border Width)	`border-`	`border` (1px), `border-2` (2px), `border-4` (4px), `border-t-2` (위쪽만 2px 실선)
선 종류 (Border Style)	`border-`	`border-solid` (일반 실선), `border-dashed` (점선), `border-dotted` (둥근 점선)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Rounded & Shadow Playground</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center font-sans">
  
  <div class="max-w-xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4 text-center">
      <h2 class="text-2xl font-black text-white">Glass Card Customizer</h2>
      <p class="text-sm text-slate-400 mt-1">컨트롤 버튼으로 라운드(모서리)와 섀도우를 실시간 교체해 보세요!</p>
    </div>

    <!-- Playground Display Card -->
    <div class="bg-slate-950 p-10 rounded-2xl flex justify-center items-center">
      <div id="interactive-card" class="bg-slate-800/80 border border-slate-700/50 w-64 h-40 flex items-center justify-center font-extrabold text-xl text-white transition-all duration-300">
        Demo Card
      </div>
    </div>

    <!-- Buttons -->
    <div class="grid grid-cols-2 gap-2">
      <button onclick="changeStyle('rounded-none', 'shadow-none')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
        Flat & Angular (none)
      </button>
      <button onclick="changeStyle('rounded-2xl', 'shadow-2xl shadow-pink-500/20')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg text-sm transition-all shadow-lg shadow-indigo-600/30">
        Vibrant & Round (2xl)
      </button>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview

그림자, 테두리, 라운드 효과

디테일이 살아있는 프리미엄 카드 디자인의 핵심 삼총사

⚠️ 주의: border 단독 선언 시 테두리가 보이지 않는 현상

디자인 특성	기본 적용 접두사	대표적인 수치 범위 스케일
모서리 곡률 (Radius)	`rounded-`	`rounded-sm` (2px), `rounded-md` (6px), `rounded-2xl` (16px), `rounded-full` (100% 원)
입체 그림자 (Shadow)	`shadow-`	`shadow-sm` (미세함), `shadow-md` (보통), `shadow-2xl` (입체 레이어), `shadow-inner` (안쪽 음각)
테두리 선 (Border Width)	`border-`	`border` (1px), `border-2` (2px), `border-4` (4px), `border-t-2` (위쪽만 2px 실선)
선 종류 (Border Style)	`border-`	`border-solid` (일반 실선), `border-dashed` (점선), `border-dotted` (둥근 점선)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Rounded & Shadow Playground</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen text-slate-200 p-8 flex items-center justify-center font-sans">
  
  <div class="max-w-xl w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
    <div class="border-b border-slate-700 pb-4 text-center">
      <h2 class="text-2xl font-black text-white">Glass Card Customizer</h2>
      <p class="text-sm text-slate-400 mt-1">컨트롤 버튼으로 라운드(모서리)와 섀도우를 실시간 교체해 보세요!</p>
    </div>

    <!-- Playground Display Card -->
    <div class="bg-slate-950 p-10 rounded-2xl flex justify-center items-center">
      <div id="interactive-card" class="bg-slate-800/80 border border-slate-700/50 w-64 h-40 flex items-center justify-center font-extrabold text-xl text-white transition-all duration-300">
        Demo Card
      </div>
    </div>

    <!-- Buttons -->
    <div class="grid grid-cols-2 gap-2">
      <button onclick="changeStyle('rounded-none', 'shadow-none')" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg text-sm transition-all">
        Flat & Angular (none)
      </button>
      <button onclick="changeStyle('rounded-2xl', 'shadow-2xl shadow-pink-500/20')" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg text-sm transition-all shadow-lg shadow-indigo-600/30">
        Vibrant & Round (2xl)
      </button>
    </div>
  </div>

</body>
</html>

🔒 localhost:8000/preview