---
title: "링크"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "의미론적 HTML 앵커를 사용하는 Tailwind CSS 링크. 액세스 가능하고 테마 인식 하이퍼링크를 위한 일관된 마우스 오버 상태, 색상 변형 및 밑줄 스타일."
url: https://frutjam.com/ko/components/link
---

# 링크 구성요소

Link components style anchor elements with visual hierarchy and semantic meaning. The Frutjam link system supports multiple colors, hover effects, sizes, and decoration options through Tailwind CSS utility classes. Perfect for text links, navigation, and call-to-action elements, links maintain accessibility standards with proper focus management and underline toggle options.

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

| Class          | 타입    | Description                            |
| -------------- | ----- | -------------------------------------- |
| link           | Base  | Styled anchor with underline and color |
| link-hover     | Style | Underline visible only on hover        |
| link-xs        | Size  | Extra small                            |
| link-sm        | Size  | Small                                  |
| link-md        | Size  | Medium (default)                       |
| link-lg        | Size  | Large                                  |
| link-xl        | Size  | Extra large                            |
| link-2xl       | Size  | 2× extra large                         |
| link-primary   | Color | Primary theme color                    |
| link-secondary | Color | Secondary theme color                  |
| link-accent    | Color | Accent theme color                     |
| link-neutral   | Color | Neutral theme color                    |
| link-info      | Color | Info semantic color                    |
| link-success   | Color | Success semantic color                 |
| link-warning   | Color | Warning semantic color                 |
| link-error     | Color | Error semantic color                   |

## Basic Usage

## Link Colors

Apply semantic link colors to match your theme or to convey meaning (such as using `link-error` for destructive actions or `link-success` for confirmation).

```html
<a class="link link-primary">Primary link</a>
<a class="link link-secondary">Secondary link</a>
<a class="link link-accent">Accent link</a>
<a class="link link-success">Success link</a>
<a class="link link-info">Info link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>
<a class="link link-neutral">Neutral link</a>
```

## Link Sizes

Scale your **hyperlinks** to match the surrounding typography. These utility classes range from extra small for footer "legal" text to 2X large for high-impact hero sections.

```html
<a class="link link-xs">Primary link</a>
<a class="link link-sm">Secondary link</a>
<a class="link link-md">Accent link</a>
<a class="link link-lg">Success link</a>
<a class="link link-xl">Info link</a>
<a class="link link-2xl">Warning link</a>
```

## Link Hover State

By default, you can choose to hide the underline and only reveal it on hover. This is a common design pattern for cleaner **navigation menus** and dashboard sidebars.

```html
<a class="link link-hover">Hover this link</a>
```