Borders (테두리)
Foundation의 테두리 시스템은 Border Radius와 Border Width를 제공하여 일관된 UI 요소의 모서리와 경계를 표현합니다.
테두리 철학
Foundation의 테두리는 다음 원칙을 따릅니다:
- Rounded Corners: 부드러운 모서리로 현대적인 UI 표현
- Consistency: 모든 컴포넌트가 동일한 Border Radius 사용
- Flexibility: sm부터 xl까지 다양한 크기 제공
- Accessibility: 명확한 경계로 요소 구분
Border Radius (모서리 둥글기)
Foundation은 4단계 Border Radius를 제공합니다.
실제 토큰 값 (core.css)
@theme {
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
}사용 가이드
| 토큰 | 크기 | 사용 사례 | Tailwind Class |
|---|---|---|---|
| sm | 4px | Input, Tag, Badge | rounded-sm |
| md | 8px | Button, Card (기본) | rounded-md |
| lg | 12px | Modal, Dialog | rounded-lg |
| xl | 16px | Hero Image, Feature Card | rounded-xl |
사용 방법
CSS Variables로 사용
.button {
border-radius: var(--radius-md);
}
.card {
border-radius: var(--radius-lg);
}Tailwind Utility Classes로 사용
<div className="rounded-md">Medium border radius (8px)</div>특정 모서리만 둥글게
<div className="rounded-t-lg">
Top corners rounded (12px)
</div>
<div className="rounded-b-md">
Bottom corners rounded (8px)
</div>컴포넌트별 Border Radius 가이드
Button
// Small Button
<button className="px-md py-sm bg-primary text-white rounded-sm">
Small Rounded
</button>
// Medium Button (기본)
<button className="px-md py-sm bg-primary text-white rounded-md">
Medium Rounded
</button>
// Large Button
<button className="px-md py-sm bg-primary text-white rounded-lg">
Large Rounded
</button>Card
// Default Card
<div className="p-md bg-white border shadow-md rounded-lg">
Card with lg border radius (12px)
</div>
// Compact Card
<div className="p-sm bg-white border rounded-md">
Card with md border radius (8px)
</div>Input
// Default Input
<input className="px-md py-sm border rounded-md" />
// Pill Input
<input className="px-md py-sm border rounded-full" />Border Width
Foundation은 Tailwind의 기본 Border Width를 사용합니다.
사용 가이드
| Width | 사용 사례 | Tailwind Class |
|---|---|---|
| 1px | Default Border | border |
| 2px | Focus State, Strong Border | border-2 |
| 4px | Accent Border | border-4 |
예제
<div className="border border-gray-200 rounded-md">
1px border
</div>
<div className="border-2 border-primary rounded-md">
2px border (accent)
</div>Border Color
Foundation은 Neutral Gray Scale을 Border Color로 사용합니다.
권장 조합
// Subtle Border
<div className="border border-gray-200">Subtle</div>
// Default Border
<div className="border border-gray-300">Default</div>
// Strong Border
<div className="border-2 border-gray-400">Strong</div>
// Accent Border
<div className="border-2 border-primary">Primary</div>실전 예제
Card with Image
export default function ImageCard() {
return (
<div className="bg-white rounded-lg overflow-hidden shadow-md">
<img src="/image.jpg" alt="Card" className="w-full h-48 object-cover" />
<div className="p-md">
<h3 className="text-xl font-semibold">Card Title</h3>
<p className="text-gray-600 mt-sm">Card description</p>
</div>
</div>
);
}Input Group
export default function InputGroup() {
return (
<div className="flex">
<input
className="flex-1 px-md py-sm border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary"
placeholder="Enter text"
/>
<button className="px-md py-sm bg-primary text-white rounded-r-md">
Search
</button>
</div>
);
}Alert
export default function Alert() {
return (
<div className="p-md bg-blue-50 border-l-4 border-blue-500 rounded-md">
<div className="flex gap-md">
<span className="text-blue-500">ℹ️</span>
<p className="text-blue-800">This is an informational alert</p>
</div>
</div>
);
}접근성 고려사항
Focus Indicator
Focus 상태에서는 명확한 Border 또는 Outline을 사용하세요.
<button className="px-md py-sm bg-primary text-white rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
Accessible Button
</button>Color Contrast
Border Color는 배경색과 최소 3:1 대비를 유지하세요.
// ✅ Good: gray-300 on white
<div className="border border-gray-300">Content</div>
// ❌ Bad: gray-100 on white (insufficient contrast)
<div className="border border-gray-100">Content</div>다음 단계
Last updated on