---
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 바닥글입니다. 반응형 웹사이트 바닥글을 위한 SEO 친화적인 구조인 시맨틱 HTML5입니다."
url: https://frutjam.com/ko/components/footer
---

# 바닥글 구성요소

Footer components organize and present site-wide information like links, copyright, and contact details at the bottom of pages. Built with semantic HTML, footers improve navigation and provide important meta information. The Frutjam footer system supports multiple layouts, directions, and styles—ideal for site footers, documentation footers, and bottom navigation.

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

| Class             | 타입       | Description                            |
| ----------------- | -------- | -------------------------------------- |
| footer            | Base     | Page footer container with grid layout |
| footer-title      | Modifier | Section heading inside the footer      |
| footer-horizontal | Modifier | Horizontal single-row layout           |
| footer-vertical   | Modifier | Vertical stacked layout                |

## Basic Usage

## Footer Directions

```html
<footer class="footer footer-center p-10 bg-base-200 text-on-base">
  <div class="flex justify-center">
    <a class="link link-hover">Company</a>
    <a class="link link-hover">About</a>
    <a class="link link-hover">Contact</a>
  </div>
  <div>
    <p>Copyright © 2024 - All rights reserved</p>
  </div>
</footer>
```

## Footer with Social

```html
<footer class="footer bg-neutral text-on-neutral p-10">
  <div>
    <span class="footer-title">Services</span>
    <a class="link link-hover">Web Design</a>
    <a class="link link-hover">UI/UX</a>
    <a class="link link-hover">Development</a>
  </div>

  <div>
    <span class="footer-title">Company</span>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
  </div>

  <div>
    <span class="footer-title">Social</span>
    <div class="flex gap-3">
      <a class="link">Twitter</a>
      <a class="link">GitHub</a>
      <a class="link">LinkedIn</a>
    </div>
  </div>
</footer>
```