> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 요소 편집

> Canvas의 프레임 내부 개별 요소를 선택하고 편집하세요.

**Element**는 제목, 버튼, 이미지, 양식 필드 또는 프레임이 렌더링하는 기타 컴포넌트와 같은 프레임 내부의 개별 요소입니다. Elements는 전체 프레임을 재생성하지 않고 프레임의 한 부분을 변경하고 싶을 때 타겟팅하는 대상입니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-edit.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d04a99a7f567c79c879a0168146b9f02" alt="Edit 도구가 활성화된 Canvas — Website 아티팩트의 이미지 요소가 선택되어 있고(파란색으로 강조 표시되고 'img' 칩 레이블이 있음), Visual Editor 패널에 Layout(Outer/Inner space), Color(Opacity), Border(색상, 너비, 반경) 컨트롤과 변경 사항 취소 및 저장 버튼이 표시됨" width="1725" height="1041" data-path="images/replitai/canvas-edit.png" />
</Frame>

## 요소 선택하기

툴바의 [Edit 도구](/references/design/toolbar#edit)를 사용하세요. Edit가 활성화된 상태에서 라이브 프레임 내부를 클릭하면 커서 아래의 요소가 선택됩니다. 선택된 요소에는 하이라이트 윤곽선이 표시되고 Agent에게 변경을 요청할 수 있는 인라인 프롬프트가 나타납니다.

<Note>
  Edit는 Canvas에 프레임이 하나 이상 있을 때만 활성화되며, 데스크톱 전용입니다.
</Note>

## 선택된 요소에 작업하기

### Agent에게 변경 요청하기

인라인 프롬프트를 사용하여 요소의 텍스트, 색상, 레이아웃, 간격, 동작을 업데이트하도록 Agent에게 요청하세요.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-ask-element.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=eda4762818345d2f3f0924ca584a5521" alt="Canvas에서 선택된 요소의 인라인 프롬프트 클로즈업: 'img' 칩 뒤에 '선택된 요소에 대해 질문하기…' 플레이스홀더 텍스트와 전송 버튼" width="1500" height="500" data-path="images/replitai/canvas-ask-element.png" />
</Frame>

### 요소 검사하기

프레임별 액션 바의 **Inspect** 버튼을 통해 요소를 검사하면 해당 요소를 타겟팅하는 **Visual Editor**가 열립니다.

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-inspect.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=f20feafe013fe64735f992163d729357" alt="포커스 모드의 McLaren 765LT 상세 페이지(오른쪽 하단에 'Preview: Velocity — Supercar Rental'로 표시됨)에서 McLaren 이미지 요소가 선택되어 있음(파란색으로 강조 표시되고 'img' 칩이 있음). Visual Editor 패널이 열려 있고 이미지 소스 경로, 이미지 업로드 버튼, Layout, Color, Border 섹션이 표시됨" width="3442" height="2164" data-path="images/replitai/canvas-inspect.png" />
</Frame>

<Note>
  Inspect는 프레임이 포커스 모드에 있고 요소가 선택 가능한 DOM 노드인 경우에만 사용 가능합니다.
</Note>

## Visual Editor

요소를 선택하면 **Visual Editor**가 열립니다 — 인라인 프롬프트와 함께 있는 오른쪽 패널입니다. 패널은 모든 컨트롤을 명확한 섹션으로 그룹화하여 필요한 것을 더 빠르게 찾을 수 있게 합니다: **Text**, **Layout**, **Color**, **Border**. (이미지 요소를 선택하면 **Image** 섹션도 나타납니다.)

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-element-panel.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=5d1c8d24fed53efbe4bbcfc17e721659" alt="div 요소(McLaren 예약 사이드바)가 선택된 Canvas. 오른쪽의 Visual Editor 패널에 Text(폰트 크기 16, 폰트 굵기 Regular, 정렬), Layout(Outer space 0/0, Inner space 20/20 링크 토글 포함, 24px 간격), Color(Text #e4e4e7), Background 섹션이 표시됨" width="3442" height="2164" data-path="images/replitai/canvas-element-panel.png" />
</Frame>

### Layout

**Layout** 섹션에서는 Agent 없이 컨테이너 내의 자식 요소 배치를 조정할 수 있습니다. flex 컨테이너를 선택하고 Layout을 펼치면 다음을 확인할 수 있습니다:

* **Alignment**: 컨테이너 내에서 두 축을 따라 항목이 배치될 위치를 선택하는 3×3 점 선택기.
* **Direction**: 자식을 행 또는 열로 쌓는 두 개의 화살표 버튼.
* **Gap**: 항목 사이의 픽셀 값. Gap 입력 옆의 아이콘은 현재 방향에 맞게 변경되므로 수평 또는 수직 간격을 조정하는지 항상 알 수 있습니다. 옆의 화살표 아이콘은 **항목 사이에 공간 분배**를 토글하여 자식을 컨테이너의 반대쪽 끝으로 밀어냅니다.
* **Outer space**: 요소 외부 공간의 면별 입력(각 면당 하나의 입력, 네 면을 모두 한 번에 고정하는 링크 토글 포함).
* **Inner space**: 각 축을 따라 요소 내부 공간에 대한 입력, 두 축을 동시에 조정하는 링크 토글 포함.

Layout 섹션은 선택된 요소에 하나 이상의 레이아웃 컨트롤이 적용될 때만 나타납니다. 간격이나 레이아웃 속성이 없는 일반 텍스트 노드는 섹션을 완전히 숨겨 편집기를 간결하게 유지합니다.

**Text**, **Color**, **Border**, **Image** 섹션에 대해서는 [Visual Editor 가이드](/learn/design/visual-editor)를 참조하세요.

## 관련 페이지

* [Canvas](/references/design/canvas) — 개요 및 구조.
* [Frames](/references/design/frames) — Elements가 위치하는 컨테이너.
* [Toolbar](/references/design/toolbar) — Edit 도구가 있는 위치.
* [Visual Editor](/learn/design/visual-editor) — 전체 요소 편집 안내.