SILVERLOGS

Visual Code Inspector & Precision Drag Builder

ProSD 세밀한 색상·외곽선·모서리·구분선 편집 · 키보드 방향키 미세 이동 지원

원본 소스 코드 (HTML / .vue)

HTML / TXT / .vue 파일 드래그 & 드롭 또는 클릭 (직접 저장 지원)
Vue SFC 모드 (script/style 보존 중)
디자인 세밀 설정 & 정밀 세부 편집
선택 요소 없음
전체 페이지 배경(Canvas)
라이브 화면 요소를 클릭하여 편집하세요.
텍스트 내용 수정
Quick 스타일
세밀 미세 이동 & 레이어 (Delete 키 삭제) 방향키: 1px | Shift+방향키: 5px
너비
높이
글자 색
바탕(배경) 색
외곽선 색
두께 / 선 모양
정렬 정밀 컨트롤 (Flex/표/블록)
상하 정렬 (박스/버튼 자체 위치)
안쪽 여백 (Padding, 박스/버튼 세밀 조정)
모서리 둥글기 / 원형 변환 (Radius) 0px
글자 크기
박스 그림자
Tailwind 클래스 피커 칩 클릭 = 제거
Zero-Error 진단 리포트 대기 중
총 교정 항목
0건
구문/보안 결함
0건
웹 접근성(A11y)
0건
SEO/대체텍스트
0건
'Zero-Error 자동 검수 & 최적화 실행' 버튼을 클릭하면 세부 검수 내역이 이곳에 표시됩니다.

라이브 Visual 화면 (드래그 & 세밀 스크린 편집)

3번 UI 부품 팔레트 Pro (드래그 또는 클릭하여 요소 자동 배치)
Vertical
Horizontal
표 삽입
표 크기를 선택하세요
🔲 Flex 컨테이너
⭕ 원형 아바타
🔘 일반 버튼
⌨️ 입력 폼
📝 텍스트
🏷️ 배지
🖼️ 이미지
📦 카드 박스
⚠️ 알림창
👥 아바타 그룹
내 컴포넌트함 (브라우저에 자동 저장 · 다른 페이지에서도 불러와 씀)
아직 저장된 컴포넌트가 없습니다. 라이브 화면에서 요소를 클릭해 선택한 뒤 "선택요소 저장"을 눌러보세요.
DOM 트리 클릭=선택
안내 메시지