CSS 입력

포맷된 CSS

CSS 포맷 예시

압축된 CSS는 읽기 어렵습니다. 포맷하면 들여쓰기와 줄 바꿈이 추가됩니다. 예시:

컨테이너와 버튼 스타일

압축된 입력:

입력

포맷된 출력:

출력

위의 샘플을 클릭하여 압축된 CSS를 편집기에 불러오세요.

CSS 포매터란?

CSS(Cascading Style Sheets)는 모든 웹사이트를 스타일링합니다. 압축되거나 형식이 잘못된 CSS는 읽고 디버깅하기 어렵습니다. CSS 포매터는 원시 또는 압축된 CSS에 들여쓰기와 줄 바꿈을 추가하여 선택자, 속성 및 중첩을 명확하게 볼 수 있게 합니다. W3C CSS 사양이 언어를 정의합니다.

이 도구는 CSS를 파싱하고 일관된 들여쓰기로 다시 포맷합니다. 완전히 브라우저에서 실행됩니다. 서버로 전송되는 데이터가 없으므로 프로덕션 스타일시트에 안전하게 사용할 수 있습니다. CSS 압축에는 CSS 압축기를, 검증에는 CSS 검증기를 사용하세요.

이 도구 사용 방법

붙여넣기 또는 업로드

CSS를 복사하여 왼쪽 편집기에 붙여넣으세요. 업로드를 클릭하여 .css 파일을 불러올 수도 있습니다. 샘플 버튼으로 예제 데이터를 불러옵니다. 유효하지 않은 CSS는 오류를 표시합니다.

출력 확인

오른쪽 패널이 자동으로 업데이트됩니다. 유효한 CSS는 올바른 들여쓰기로 포맷됩니다. <strong>압축</strong>을 사용하여 공백을 제거하고 프로덕션용 컴팩트 버전을 얻으세요.

복사 또는 다운로드

복사로 결과를 클립보드에 넣거나 다운로드로 파일로 저장하세요. SCSS나 Less의 경우 먼저 SCSS를 CSS로 또는 Less를 CSS로에서 컴파일하세요.

포매터의 작동 방식

이 도구는 CSS를 파싱하고 일관된 들여쓰기로 다시 포맷합니다. 선택자, 속성, 규칙이 감지되고 중괄호와 세미콜론은 보존됩니다. W3C CSS 사양이 언어를 정의합니다. 포맷은 동작을 변경하지 않고 가독성을 위해 줄 바꿈과 공백을 추가합니다. @media, @keyframes, @import 같은 at-rule이 처리됩니다. 처리는 브라우저에서 실행되며 서버로 전송되는 데이터가 없습니다.

Vite, Webpack, Parcel 같은 빌드 도구들은 종종 압축된 CSS를 출력합니다. 그 출력을 여기에 붙여넣으면 읽기 쉬워집니다. SCSS나 Less 소스 코드의 경우 먼저 SCSS를 CSS로 또는 Less를 CSS로에서 컴파일한 후 포맷하세요.

CSS 포맷이 도움이 되는 경우

대부분의 개발자는 프로덕션 사이트의 스타일을 검사하거나, 서드파티 CSS를 디버깅하거나, 빌드 도구의 압축된 출력을 검토할 때 포매터가 필요합니다. 압축된 CSS를 여기에 붙여넣으면 선택자와 규칙이 즉시 표시됩니다. Bootstrap이나 Tailwind의 컴파일 출력은 종종 압축되어 있으며 포맷하면 구조가 드러납니다.

포맷은 팀원과 스타일을 공유하거나 풀 리퀘스트를 검토하기 전에도 도움이 됩니다. 벤더 프리픽스 추가에는 CSS 프리픽서를, 인라인 스타일 변환(예: 이메일)에는 CSS를 인라인으로를, 검증에는 CSS 검증기를 사용하세요.

자주 묻는 질문

내 데이터는 안전한가요?

예. 포맷은 완전히 브라우저에서 실행됩니다. 어떤 서버로도 데이터가 전송되지 않습니다. 브라우저의 네트워크 탭에서 확인할 수 있습니다.

SCSS나 Less를 지원하나요?

이 도구는 순수 CSS를 포맷합니다. SCSS나 Less의 경우 먼저 SCSS를 CSS로 또는 Less를 CSS로에서 컴파일한 후 출력을 포맷하세요.

압축은 무엇을 하나요?

포맷된 출력에서 공백, 줄 바꿈, 주석을 제거하여 프로덕션용 최소 버전을 제공합니다. 전용 CSS 압축기 페이지도 있습니다.

주석이 보존되나요?

포맷은 주석을 보존합니다. 압축 시에는 압축기에 따라 제거될 수 있습니다. 프로덕션에 사용하기 전에 출력을 확인하세요.

CSS 사용자 지정 속성은 어떻게 되나요?

CSS 변수(--var-name)가 지원됩니다. 포매터는 사용자 지정 속성, @media, @keyframes를 포함한 모던 CSS 구문을 처리합니다.

CSS 포매터