> For the complete documentation index, see [llms.txt](https://bugshot.gitbook.io/ko/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bugshot.gitbook.io/ko/element/styling.md).

# 스타일링

요소를 선택하면 스타일 패널이 열립니다. 값을 바꾸면 **페이지에 곧바로 반영**되니, 고친 모습을 실제 화면에서 바로 확인하면서 다듬을 수 있습니다.

## 스타일 패널 섹션

패널은 위에서 아래로 다음 섹션 순서로 구성됩니다(라벨은 화면에서 영문으로 표시됩니다).

1. **Class** — 요소의 class 목록 편집.
2. **Layout** — display·position·flex 정렬·margin·padding·gap.
3. **Container** — 배경·투명도·테두리·모서리 반경.
4. **Size** — 너비·높이와 최소/최대값.
5. **Overflow** — overflow·줄바꿈·말줄임.
6. **Text** — 요소의 텍스트 내용 편집(텍스트가 있는 요소에서만 표시).
7. **Typography** — 글꼴 크기·굵기·줄 높이·자간·정렬·색.
8. **Effects** — 그림자·필터·블렌드.
9. **Transition** — 전환 속성·시간·이징.

![스타일 패널 섹션](/files/WnAI6433CstOJsnX1mud)

## 라이브 반영과 되돌리기

* 값을 바꾸면 페이지에 **곧바로** 적용됩니다.
* 섹션마다 인라인 변경만 원복하거나, Class·Text를 원본으로 되돌리는 버튼도 따로 있으니 부담 없이 이것저것 시도해 보세요.

## 변경사항 보기

지금까지 무엇을 바꿨는지 헷갈릴 땐, 패널 하단의 **변경사항 보기** 버튼을 눌러 보세요. 버튼 옆 숫자는 지금까지 바꾼 항목 수이고, 바꾼 게 없으면 버튼은 비활성화됩니다.

누르면 다이얼로그가 열리고, 수정한 **요소별로 묶여** 각 항목이 **고치기 전 → 후**로 나열됩니다. 현재 선택한 요소와, 앞서 담아 둔 요소(아래 "여러 요소를 한 이슈에" 참고)가 모두 보입니다.

* 항목 우측 휴지통 아이콘 **이 변경 초기화** — 그 항목 하나만 원래 값으로 되돌립니다. 페이지와 스타일 패널이 바로 갱신됩니다. 한 요소의 마지막 항목까지 되돌리면 그 요소 카드는 통째로 사라집니다.
* 좌측 하단 **전체 초기화** — 모든 요소의 변경을 되돌립니다(이건 한 번 더 확인을 거칩니다).

항목 초기화는 따로 묻지 않고 바로 실행되니, 부담 없이 정리하셔도 됩니다. 되돌려서 변경이 하나도 안 남으면 다이얼로그는 저절로 닫힙니다.

![변경사항 보기 다이얼로그](/files/mNGx0ShQa4ZOlzn4WYh7)

## AI 스타일링

AI(LLM)를 연결해 두면 패널에 **AI 스타일링** 배너가 나타납니다. 직접 값을 만지기 번거로울 땐, **자연어로 지시**만 하면 됩니다.

* "버튼을 더 둥글게"
* "여백을 키워줘"
* "글자를 더 크고 진하게"

그러면 AI가 알맞은 스타일·class 변경을 찾아 페이지에 즉시 적용해 줍니다. AI를 연결하지 않았으면 이 배너는 나타나지 않습니다.

> AI 연결 방법은 [AI LLM 연동](/ko/settings/ai.md)을 참고하세요. AI도 가끔 실수하니 적용된 결과는 한 번 확인해 주세요.

![AI 스타일링 배너](/files/1t1We8Dl4FHOIu6AAnro)

## 여러 요소를 한 이슈에

버그가 한 곳에만 있는 건 아니죠. "버튼 색 + 그 옆 라벨 정렬 + 카드 여백"처럼 여러 요소를 묶어 한 이슈로 보내고 싶을 때가 있습니다.

A 요소를 고쳤다면, 우상단 **다시 선택**으로 다음 요소(B)를 고르면 됩니다. 이때 **A의 변경은 사라지지 않고 페이지에 그대로 남고**, 이슈에도 함께 담깁니다. 이렇게 A·B·C… 원하는 만큼 이어서 담을 수 있어요 — 요소마다 before/after가 따로 기록됩니다.

> 담은 요소는 **변경사항 보기**에서 요소별로 확인하고, 항목 단위로 따로 빼낼 수 있습니다(한 요소의 항목을 모두 빼면 그 요소가 통째로 빠집니다). 한 번에 비우려면 **전체 초기화**를 누르거나, 이슈 작성을 취소하거나 제출을 마치면 그동안 담은 요소가 모두 비워집니다.

## 다음 단계

수정이 끝나면 **다음**을 눌러 이슈 초안으로 넘어갑니다. 고치기 전과 후가 비교로 담깁니다.

> **다음**은 스타일을 최소 한 가지 바꿔야 활성화됩니다(이미 담아 둔 요소가 있으면 현재 요소를 안 바꿔도 넘어갈 수 있어요). 요소를 그대로(스타일 변경 없이) 담고 싶다면 [요소 캡처](/ko/screenshot/capture.md)를 쓰세요.

***

🌐 [English](https://bugshot.gitbook.io/en/element/styling)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bugshot.gitbook.io/ko/element/styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.