---
title: "차이점"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "콘텐츠를 나란히 비교하기 위한 Tailwind CSS Diff. 코드 검토, 문서 비교 및 변경 전/후 추적을 위해 크기 조정이 가능하고 색상으로 구분된 레이아웃입니다."
url: https://frutjam.com/ko/components/diff
---
# 차이점 구성요소
Diff 구성 요소는 두 버전의 콘텐츠 간의 차이점을 표시하므로 코드 변경 사항, 문서 개정 또는 비교 보기를 표시하는 데 적합합니다. 의미 있는 HTML과 색상으로 구분된 스타일로 구축된 diff는 사용자가 변경된 내용을 이해하는 데 도움이 됩니다. Frutjam diff 시스템은 다양한 유형과 스타일을 지원하므로 버전 제어 인터페이스, 개정 기록 및 변경 내용 추적에 적합합니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
| ------------ | --- | -------------------------- |
| diff | 베이스 | 드래그 가능한 구분선이 있는 병렬 비교 컨테이너 |
| diff-item-1 | 수정자 | 비교의 왼쪽(이전) 창 |
| diff-item-2 | 수정자 | 비교의 오른쪽(뒤) 창 |
| diff-resizer | 수정자 | 두 창의 크기를 조정하는 드래그 가능한 핸들 |
## 기본 사용법
이전 상태와 이후 상태를 사용하여 간단한 병렬 비교를 만듭니다.
## Diff 텍스트 비교
자세한 비교를 위해 코드 또는 텍스트 변경 사항을 나란히 표시합니다.
```html
const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
```
## 색상 코딩을 통한 차이점
의미 있는 색상을 사용하여 제거, 추가 또는 변경된 콘텐츠를 강조 표시합니다.
```html
- const old = "value";
+ const updated = "value";
```
## 이미지 비교
드래그 가능한 리사이저를 사용하여 이미지 전후의 시각적 변화를 비교하세요.
```html
```
## 차이 크기
컨테이너의 너비 및 높이 유틸리티를 사용하여 차이 크기를 제어합니다.
```html
