---
title: "표면"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "계층화된 콘텐츠 컨테이너 및 시각적 깊이 계층 구조를 위한 Tailwind CSS 표면. 카드 대안 및 중첩 레이아웃을 위한 다양한 고도 수준 및 모양."
url: https://frutjam.com/ko/components/surface
---

# 표면 구성요소

Surface components are versatile layout primitives that create layered visual hierarchies and content containers. Built with semantic HTML, surfaces provide flexible depth and styling options. The Frutjam surface system supports multiple sizes, shapes, and layers—ideal for card alternatives, content blocks, and nested layouts.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class           | 타입    | Description                            |
| --------------- | ----- | -------------------------------------- |
| surface         | Base  | Base surface container                 |
| surface-1       | Style | Elevation level 1 (subtle)             |
| surface-2       | Style | Elevation level 2                      |
| surface-outline | Style | Transparent fill with a visible border |
| surface-dashed  | Style | Dashed border style                    |
| surface-rounded | Style | Moderately rounded corners             |
| surface-xs      | Size  | Extra small padding                    |
| surface-sm      | Size  | Small padding                          |
| surface-md      | Size  | Medium padding (default)               |
| surface-lg      | Size  | Large padding                          |
| surface-xl      | Size  | Extra large padding                    |

## Basic Usage

## Surface Layers

Use `surface-1` and `surface-2` to create depth hierarchy by mixing the base color with the foreground color.

```html
<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>
```

## Surface Shapes

```html
<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>
```

## Border Styles

Use `surface-outline` or `surface-dashed` for transparent containers defined by a border. These work correctly when nested inside colored layers because the background is explicitly transparent.

```html
<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>
```

## Surface Sizes

Size utilities set the internal padding via `--surface--padding`. Do not combine with Tailwind `p-*` utilities—they will override the variable and defeat the size class.

```html
<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>
```

## Nested Surfaces

```html
<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>
```