코드 정렬기

언어 선택:

코드 입력:

들여쓰기 크기:

2칸

템플릿:

정렬된 코드

정렬된 코드가 여기 표시됩니다.

변수명 생성기

변수 범위:

변수 용도/설명:

Naming Convention:

생성된 변수명

생성된 변수명이 여기 표시됩니다.

Naming Convention 예시

범위	Convention	예시 (email address)
Global	PascalCase	GlobalEmailAddress
Local	lowerCamelCase	lEmailAddress
Global	snake_case	g_email_address
Local	kebab-case	l-email-address

HTML 태그 분석기

HTML 코드 입력:

HTML 샘플:

분석 결과

분석 결과가 여기 표시됩니다.

각 태그별로 사용된 속성과 값이 표 형태로 표시됩니다.

CSS 코드 모음

플렉스 센터 정렬

display: flex;
justify-content: center;
align-items: center;

그리드 레이아웃 (기본)

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;

카드 스타일

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
}

버튼 스타일

.btn {
  display: inline-block;
  padding: 10px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.btn:hover {
  background: #0069d9;
}

Tip & FAQ

1초 만에 “예쁘게 정렬” 하는 법

입력 창에 커서를 두고 Ctrl＋Shift＋F를 누르면 언어를 자동 감지해 즉시 **Beautify** 되며,
Ctrl＋M은 **Minify** 단축키입니다.

Beautify 시에는 불필요한 공백·줄바꿈을 정리하지만,
**<pre>·<code> 태그 내부**는 원본 그대로 유지됩니다. Minify 모드에서는 모든 공백이 제거됩니다.

브라우저 메모리 한계 내에서 수백 KB 수준까지는 무리 없이 동작합니다. 1 MB 이상이라면 탭이 멈출 수 있으니 파일을 분할해 처리하는 것을 권장합니다.

예. jsp·xml·vue 등 HTML 유사 문법은 모두 **html 모드**로 Beautify 됩니다. 단, JSP 스크립틀릿(<% … %>) 내부 자바 코드는 들여쓰기가 빗나갈 수 있습니다.

현재 Minify는 모든 주석을 제거해 최대한 크기를 줄이도록 설계되었습니다.
주석을 일부 남기려면 Beautify 후 수동으로 정리하거나, **/*! … */** 같이 “느낌표 주석”을 사용해 보세요.

전송되지 않습니다. 모든 정렬·압축 로직은 **브라우저 내(JavaScript)** 에서만 실행되므로 민감한 코드도 안전하게 사용할 수 있습니다.

Sponsored