CSS 포맷 도구
CSS 포맷팅이란?
CSS 포맷팅은 지저분한 CSS 코드를 규범적이고 읽기 쉬운 형식으로 정리하는 과정입니다. 좋은 CSS 형식은 코드의 유지보수성을 높이고, 팀 협업을 용이하게 하며, 스타일 문제를 빠르게 찾을 수 있습니다. 포맷팅에는 통일된 들여쓰기, 속성 정렬, 적절한 줄 바꿈, 선택자 최적화 등이 포함됩니다. 압축은 모든 공백과 주석을 제거하여 파일 크기를 크게 줄이고 페이지 로딩 속도를 향상시킵니다.
사용 방법
사용 방법
- 왼쪽 입력 상자에 CSS 코드를 붙여넣거나 입력합니다
- 들여쓰기 크기와 포맷 스타일을 선택합니다
- '포맷'을 클릭하여 코드를 정리하거나, '압축'을 클릭하여 크기를 줄입니다
- 오른쪽에서 구문 강조가 적용된 결과를 확인합니다
- '복사'를 클릭하여 클립보드에 복사합니다
포맷 스타일 옵션
키보드 단축키
- Ctrl + Enter포맷
- Ctrl + Shift + C결과 복사
포맷 팁
- 포맷은 공백과 레이아웃만 변경하며 셀렉터 동작은 그대로 둡니다. 복잡한 캐스케이드나 미디어 쿼리 코드를 수정한 후에는 스타일시트를 꼭 테스트하세요.
- 출력물을 전송이나 삽입용으로 사용할 때만 압축하세요. 검토와 유지보수를 위해 가독성 있는 원본 사본을 보관하세요.
활용 사례
기술 원리
CSS 포맷팅은 전체 파싱이 아닌 토크나이징 + 프리티 프린팅 문제입니다. 사양 준수 CSS 파서(CSS Syntax Module Level 3, W3C 권고안)는 포맷터보다 무겁습니다: 스타일 규칙, at-규칙, 선언, 구성 값으로 AST를 구축하고 파싱 에지 케이스(미종료 문자열, 불일치 중괄호, 벤더 접두사 속성)를 처리합니다. 이 페이지는 더 가벼운 토크나이저를 사용하여 문자 스트림을 순회하고, 동일한 토큰 클래스(ident, at-keyword, hash, string, bad-string, number, dimension, percentage, url, function, punctuation, comment)를 인식한 뒤 평탄 목록으로 출력합니다. 그런 다음 프리티 프린터가 선택한 들여쓰기, 중괄호 스타일, 공백 규칙에 따라 토큰을 재조립합니다. CSS의 두 구조 단위는 규칙 블록(선택자 { 선언 })과 at-규칙 블록(@media, @supports, @container, @keyframes가 하나 이상의 규칙 블록을 감쌈)입니다. 포맷터는 토큰 스트림을 순회하며 중괄호 깊이를 추적합니다: {는 깊이를 증가시키고(새 줄 + 들여쓰기 뒤따름), }는 깊이를 감소시키며(일치하는 {에 맞게 들여쓰기 축소) 작동합니다. 선택자는 그대로 출력됩니다 - 포맷터는 선택자를 파싱하지 않는데, .foo > .bar:hover:not(.baz) 같은 선택자를 파싱하는 것은 별도의 문제(CSS Selectors Level 4)이기 때문입니다. 선택자는 바이트 단위로 보존되며, 공백만 정규화됩니다(다중 공백은 하나로 축소, 후행 공백 제거). 따라서 축소된 .a,.b,.c는 .a, .b, .c로 변환됩니다. 선언은 선택한 스타일로 포맷됩니다: 'expanded'(각 속성이 별도 줄, 가장 읽기 쉬움), 'compact'(규칙당 1줄, 여러 선언이 압축, 프로덕션 CSS에서 가장 일반적), 또는 'compressed'(축소, 공백 없음, 가장 작은 출력). 속성 이름 뒤의 콜론은 항상 공백 하나가 뒤따르고, 값은 몇 가지 정규화(0.500에서 후행 0 제거 → .5, 0px에서 단위 제거 → 0, 고전적인 CSS 축소 트릭)를 제외하면 그대로 출력됩니다. 축소는 반대 방향입니다: 주석 제거, 선언 내부와 사이의 공백 축소, 블록 마지막 선언 뒤의 세미콜론 제거(CSS 2.1 §4.1.7에 따라 합법), 같은 선택자와 미디어 컨텍스트의 인접 규칙 블록 병합, 색상 값 정규화(#ffffff → #fff, 가능하면 rgb(255,255,255) → #fff). 최신 축소기(cssnano, lightningcss, clean-css)는 구조 최적화도 수행합니다: 롱핸드를 숏핸드로 병합(margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px; → margin: 1px;), 규칙 내 중복 선언 제거, 어떤 요소에도 일치하지 않는 규칙 제거(데드 코드 제거 패스의 div:has-no-children { color: red; }). 축소 출력에는 표준 변환을 적용하고, 사람이 읽을 수 있는 출력에는 선택한 들여쓰기와 중괄호 스타일을 적용합니다. CSS Nesting Module(CSSWG, 2023년 초안, 2024년 Baseline)은 네이티브 중첩을 도입합니다: .a { color: red; & .b { color: blue; } }는 이제 최신 브라우저(Chrome 112+, Firefox 117+, Safari 16.5+)에서 유효한 CSS입니다. 2024년 이전 중첩은 전처리기 재작성(Sass & 또는 Less &로 선택자 체이닝)이 필요했습니다. 이 페이지는 둘 다 처리합니다: 전처리기 중첩 CSS는 SCSS/Less처럼 포맷되고(& 보존), 네이티브 중첩 CSS(& 불필요)는 규칙 블록 산책 방식으로 포맷됩니다. 페이지가 처리하는 다른 at-규칙: @keyframes와 @counter-style는 중첩 규칙 블록이 아닌 선언의 본문을 가져서 다르게 포맷됩니다(at-규칙 내 선언, 중첩 중괄호 없음). @media, @supports, @container, @layer는 규칙 블록의 본문을 가져갑니다. @import, @charset, @namespace는 최상위 전용이며 자체 줄에 출력됩니다. @property(등록된 사용자 정의 속성)는 선언 블록을 가져갑니다. @font-face는 복잡한 선택자 없는 선언이 있는 단일 규칙 블록입니다. 이 페이지는 이름이 아닌 사양에 정의된 본문 형태에 따라 각각을 처리합니다. 가장 흔한 포맷팅 함정은 문자열 리터럴 내부 콘텐츠를 손상시키는 것입니다: content: "hello world";, font-family: "Arial Black", sans-serif;, background: url("image.png") - 포맷터는 문자열 내부의 공백을 축소하면 안 되고, URL을 / 기준으로 분할하면 안 되며, /* ... */ 내부의 주석 텍스트를 건드리면 안 됩니다. 문자열 상태와 주석 상태를 올바르게 추적하는 토크나이저가 사용자 콘텐츠를 완벽하게 보존하는 포맷터와 손상시키는 포맷터의 차이입니다. 이 페이지의 토크나이저는 직접 작성되어 눈으로 검증할 수 있을 만큼 작습니다. 프로덕션 포맷터는 postcss나 lightningcss를 사용하며, 내부 렉서에서 동일한 의무를 집니다.
- 어휘 분석(CSS Syntax Level 3): 문자 스트림을 순회하여 ident / at-keyword / hash / string / number / dimension / percentage / url / function / punctuation / comment 토큰을 출력합니다. 문자열과 주석은 상태를 가지며, 잘못된 토크나이저는 content: "hello world";를 손상시킵니다.
- 두 구조 단위: 규칙 블록(선택자 { 선언 })과 at-규칙 블록(@media, @supports, @container, @layer가 규칙 블록을 감쌈). 포맷터는 중괄호 깊이를 순회하며 각 {마다 새로운 수준으로 들여쓰기하고, 일치하는 }는 수준을 축소합니다.
- 선택자는 공백 정규화와 함께 그대로 출력됩니다: .a,.b,.c → .a, .b, .c. 포맷터는 선택자를 파싱하지 않습니다(CSS Selectors Level 4는 별도 문제) - 공백과 쉼표만 정리합니다.
- 출력 스타일: 'expanded'(선언당 1줄, 가장 읽기 쉬움), 'compact'(규칙당 1줄, 프로덕션에서 일반적), 'compressed'(공백 없음, 축소). 속성 이름 뒤의 콜론 + 공백이 유일한 보편적 포맷 규칙입니다.
- 축소: 주석 제거, 공백 축소, 후행 `;` 제거, 같은 선택자 규칙 병합, `#ffffff` → `#fff`, `0.500` → `.5`, `0px` → `0` 정규화. 구조적 병합: 롱핸드 → 숏핸드(`margin-top: 1px; ... margin-left: 1px;` → `margin: 1px;`).
- CSS Nesting(CSSWG 2023, Baseline 2024): `.a { & .b { ... } }`는 이제 Chrome 112+, Firefox 117+, Safari 16.5+에서 네이티브 CSS입니다. 2024년 이전 전처리기 중첩(Sass `&`, Less)도 여전히 유효하며, 이 페이지는 규칙 블록 구조를 순회하여 둘 다 포맷합니다.
- at-규칙 본문: @keyframes와 @counter-style는 선언을, @media / @supports / @container / @layer는 규칙 블록을, @import / @charset / @namespace는 최상위 구문을, @property와 @font-face는 선언 블록을 가져갑니다. 이 페이지는 이름이 아닌 사양에 정의된 본문 형태에 따라 처리합니다.
- 안전 경계: 문자열 리터럴(콘텐츠, 글꼴 이름, URL)과 주석 텍스트는 모든 변환에서 그대로 남습니다. 바이트 단위의 정확한 왕복 변환이 CSS 포맷터의 정확성 테스트입니다 - 콘텐츠 문자열을 손상시키면 사용자가 즉시 알아차립니다.
예시
압축된 CSS 포매팅
입력: .btn{color:red;background:#fff;padding:8px 16px;border-radius:4px}
출력:
.btn {
color: red;
background: #fff;
padding: 8px 16px;
border-radius: 4px;
}중첩된 규칙 펼치기
입력: .card{padding:16px}.card h2{margin:0 0 8px}.card p{color:#666}
출력:
.card {
padding: 16px;
}
.card h2 {
margin: 0 0 8px;
}
.card p {
color: #666;
}미디어 쿼리 포매팅
입력: @media(max-width:768px){.nav{display:none}.menu{width:100%}}
출력:
@media (max-width: 768px) {
.nav {
display: none;
}
.menu {
width: 100%;
}
}자주 묻는 질문
CSS 포매터는 어떤 일을 하나요?
CSS를 가독성 좋은 형태로 다시 포맷합니다. 일관된 들여쓰기, 한 줄에 한 선언, 콜론 주변 공백, 한 줄에 한 규칙으로 정리합니다. 선택자 우선순위나 속성 값은 변경하지 않으며, 순수하게 공백과 중괄호 위치만 정돈합니다.
CSS 압축(minify)도 가능한가요?
'minify' 또는 'compress' 토글이 있다면 가능합니다. 압축은 주석과 공백을 제거하고, HEX 색상을 줄이며(#ffffff → #fff), 규칙 내 마지막 선언의 끝에 붙은 세미콜론을 제거합니다. 반대 방향(beautify)은 가독성을 복원합니다.
왜 잘못된 CSS는 자동으로 고쳐지지 않나요?
이 도구는 검증기(validator)가 아니라 포매터입니다. 짝이 맞지 않는 중괄호, 누락된 세미콜론, 인식되지 않는 속성은 그대로 통과됩니다. 구문 오류를 찾으려면 CSS 린터(Stylelint)를 사용하거나 브라우저 개발자 도구에서 CSS를 로드해 확인하세요.
최신 CSS(중첩, 컨테이너 쿼리, 사용자 정의 속성)도 처리되나요?
대부분의 빌드는 @container, @supports, 사용자 정의 속성(--var), 중첩, @layer 등 최신 구문을 이해하는 CSS 파서를 사용합니다. 파서가 오래된 버전이면 새로운 구문이 어색하게 포맷될 수 있으니, 사용하기 전에 결과를 붙여 넣고 확인해 보세요.
주석이 보존되나요?
네. /* ... */ 블록 주석은 포매터가 그대로 유지합니다. 일부 압축기는 기본적으로 주석을 제거하므로, 보존이 필요하면 해당 옵션을 끄세요. 한 줄 주석 //는 표준 CSS가 아니므로 제거될 수 있습니다(이 문법은 SCSS에 속하며 CSS에는 없습니다).
CSS가 서버로 업로드되나요?
아니요. 포매팅은 JavaScript CSS 파서/프린터를 사용해 브라우저에서 수행됩니다. 붙여넣은 CSS는 전송되지 않습니다.
들여쓰기를 설정할 수 있나요?
네. 보통 2칸, 4칸 공백 또는 탭 중에서 선택할 수 있습니다. 프로젝트의 기존 스타일에 맞춰 고르세요. 원본의 혼합된 들여쓰기는 선택한 값으로 통일됩니다.