코드 정렬
뭉쳐 있는 코드를 읽기 좋게 폅니다. 문자열·주석은 그대로 둡니다.
정렬 결과
9줄
HTML · 들여쓰기 공백 2칸
언어
들여쓰기
예시
정렬된 코드
<div class="card">
<h2>제목</h2>
<!-- 주석 -->
<p>본문입니다.</p>
<ul>
<li>하나</li>
<li>둘</li>
</ul>
</div>
문자열·주석·정규식은 원문 그대로입니다. 자바스크립트는 괄호 깊이로 들여쓰므로 프로젝트에 적용할 정식 서식은 Prettier 같은 도구를 쓰세요.
사용법
- 코드를 붙여넣으면 언어를 알아서 맞춥니다. 틀리면 직접 고르세요.
- 팀 규칙에 맞춰 탭·2칸·4칸 중 들여쓰기를 고릅니다.
- 결과를 복사해 붙여 넣습니다.
- 코드는 브라우저 밖으로 나가지 않습니다.
정렬할 때 알아 둘 것
들여쓰기만 바꾼 커밋은 리뷰를 망칩니다. 변경 줄이 수백 개로 늘어나 실제 수정이 묻히기 때문입니다. 이미 굴러가는 프로젝트라면 서식 변경은 따로 커밋하거나, 애초에 프로젝트 설정을 따르세요.
공백이 의미를 갖는 곳이 있습니다. HTML의 pre·textarea 안쪽은 공백과 줄바꿈이 화면에 그대로 보입니다. 이 도구는 그 안을 건드리지 않습니다.
인라인 요소 사이의 공백도 화면에 보입니다. span 사이에 줄바꿈을 넣으면 한 칸 띄어져 보입니다.
정렬 뒤 화면 간격이 달라졌다면 대개 이 때문입니다.
이 도구는 문법을 검사하지 않습니다. 괄호가 안 맞는 코드를 넣으면 들여쓰기가 어긋난 채로 나옵니다. 결과가 이상하면 원본 코드에 문제가 있는지 먼저 보세요.
자주 묻는 질문
- 코드가 서버로 올라가나요?
- 올라가지 않습니다. 정렬은 브라우저 안에서만 이뤄지며 코드가 네트워크로 나가지 않습니다. 회사 코드처럼 밖으로 내보내면 안 되는 것을 넣어도 됩니다. 인터넷이 끊긴 상태에서도 동작합니다.
- 탭과 공백 중 무엇이 맞나요?
- 정답은 없고 팀이 정한 것을 따르는 것이 맞습니다. 다만 이미 규칙이 있는 프로젝트라면 그 설정을 그대로 쓰는 것이 중요합니다. 들여쓰기만 바뀐 커밋은 실제 변경 사항을 가려 코드 리뷰를 어렵게 만들기 때문입니다.
- 자바스크립트가 완벽하게 정렬되지 않습니다.
- 이 도구는 완전한 문법 분석기가 아니라 괄호 깊이로 들여쓰기를 맞춥니다. 그래서 한 줄로 쓴 if문이나 복잡한 체이닝은 사람이 쓴 것만큼 예쁘게 나오지 않을 수 있습니다. 대신 코드의 의미는 바꾸지 않습니다. 프로젝트에 적용할 정식 서식은 Prettier 같은 도구를 쓰세요.
- 문자열 안의 공백이 바뀌지 않나요?
- 바뀌지 않습니다. 문자열·주석·정규식은 따로 떼어 원문 그대로 보존한 뒤 되돌립니다. 예를 들어 따옴표 안의 연속 공백이나 정규식 안의 슬래시는 그대로 남습니다.
- HTML의 pre 태그 안쪽은 어떻게 되나요?
- 건드리지 않습니다. pre와 textarea는 공백과 줄바꿈이 화면에 그대로 보이는 태그라 정렬하면 표시가 달라집니다. script와 style 안쪽도 마찬가지로 통째로 보존합니다.
이 도구는 브라우저 안에서만 계산하며 입력값을 서버로 보내지 않습니다. 분류: 개발 · 마지막 수정 2026-09-08