무료 웹디자인 에디터 — 드래그로 만들고 소스는 ZIP으로

팔레트

블록

트리

히스토리

레이아웃

섹션

레이아웃(Div)

기본 요소

제목

소제목

작은글

단락

버튼

구분선

미디어

이미지박스

배경박스

영상박스

HTML

내 사진

사진 넣기

자르기

캔버스에 끌어다 놓거나 Ctrl+V 로도 넣을 수 있어요.
사진은 서버에 올라가지 않고 내 브라우저에만 있습니다.

캔버스: 1500px x:0 y:0

속성

요소를 클릭하면
속성이 표시됩니다

위치 / 크기

X (left)

Y (top)

너비

높이

Z-Index

가로 고정 px 고정

여백 (Margin / Padding)

Margin

전체

Padding

전체

배경

배경색

투명도1

BG 이미지

BG Size

BG Pos

테두리

두께

스타일

색상

라운드

텍스트

폰트

크기

색상

굵기

정렬

장식

줄간격

자간

변환

말줄임

그림자 / 필터

Box Shadow

박스

Text Shadow

텍스트

CSS Filter

블러 px

밝기 %

흑백 %

커서 / 트랜지션

Cursor

전환

레이아웃 (Flex)

Display

방향

가로정렬

세로정렬

줄바꿈

Gap

Position

Overflow

GSAP 애니메이션

효과

지속(s)

지연(s)

트리거%

반복

주소 · 대체텍스트 · 링크

이미지 주소

대체 텍스트

링크 주소

링크 열기

링크는 제목·단락·이미지 등 모든 요소에 걸 수 있어요.
편집 중에는 눌러도 이동하지 않고, 미리보기·내보내기에서 동작합니다.
대체 텍스트는 사진이 안 보일 때 대신 읽히는 설명이에요.

ID / Class

Class

커스텀 CSS

HTML 코드 편집

선택: 없음 현재: Wide (1500px) Ctrl+Z/Y 취소/재실행 · Ctrl+C/V 복사/붙여넣기 · Shift+클릭 다중선택 · Del 삭제

문서 템플릿 선택

PPTX·PDF 제작에 맞춘 페이지 규격을 선택하고, HTML 원본을 무료 에디터에서 AI와 함께 수정합니다.

주의: 템플릿을 적용하면 현재 캔버스를 교체합니다. 필요한 작업은 먼저 「내 작업 저장」으로 보관하세요.현재 단계의 편집·저장은 HTML·JSON·ZIP 기준이며, 디자인을 보존한 PPTX·PDF 출력 연결은 다음 단계입니다.

코드 내보내기

반응형 미리보기