CSS 포맷터

컴팩트 CSS를 읽을 수 있는 규칙, 선택기 및 선언으로 형식화합니다.

입력

출력

0 문자 0 줄

스타일시트를 더 쉽게 읽고 검토할 수 있도록 만들기

CSS 포맷터는 컴팩트한 CSS를 읽을 수 있는 선택기, 선언 블록, 속성 및 값으로 확장합니다. 복사된 스타일을 디버깅하고, 생성된 CSS를 검토하고, 프레임워크 출력을 검사하거나 예제를 준비할 때 도움이 됩니다.

계단식 의미 체계가 아닌 레이아웃 변경을 아름답게 합니다. 선택기 순서, 중복 선언, 사용자 정의 속성, 주석, 미디어 쿼리 및 레이어 순서는 세부 사항이 최종 스타일에 영향을 미칠 수 있으므로 그대로 유지되어야 합니다.

사용 방법

CSS 코드를 입력 편집기에 붙여넣습니다.
리플로우 규칙 및 선언을 수행하려면 CSS 포맷를 클릭하세요.
보존된 선택기 순서, 주석 및 at-규칙에 대한 출력을 검토합니다.
클립보드에는 복사를 사용하고, 파일에는 다운로드를 사용하고, 재설정하려면 지우기를 사용하세요.

CSS 뷰티파이어란 무엇인가요?

CSS 포맷터는 스타일시트를 더 쉽게 스캔할 수 있도록 해주는 브라우저 기반 유틸리티입니다. 규칙 블록과 선언을 분리하므로 조밀한 한 줄 파일을 읽지 않고도 선택기, 속성, 값 및 at-규칙을 검사할 수 있습니다.

CSS 동작은 계단식 순서, 특이성, 상속, 레이어 및 사용자 정의 속성 확인에 따라 달라집니다. 형식화로 인해 규칙이나 선언의 순서가 바뀌어서는 안 됩니다. 브라우저에서 중요한 스타일시트 변경 사항을 확인합니다.

입력 참고사항

@media, @supports 및 @layer와 같은 at-규칙을 포함하여 CSS만 붙여넣습니다. 출력을 프로젝트에 다시 복사할 때 선택기와 선언 순서를 변경하지 않고 유지합니다.

예시

각 선언이 자체 라인에 배치되면 조밀한 CSS를 스캔하기가 더 쉬워집니다.

--- Minified Input ---
body{margin:0;padding:0;font-size:16px;}.container{max-width:1200px;}

--- Beautified Output ---
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.container {
  max-width: 1200px;
}

MCP 통합

MCP(Model Context Protocol)를 통해 AI 에이전트와 앱은 Coding.Tools 유틸리티를 발견하고 반복 가능한 변환, 포맷팅, 해시, 생성 워크플로에서 실행할 수 있습니다.

MCP 도구 이름: css-beautifier

MCP 엔드포인트: https://coding.tools/mcp

먼저 tools/list를 호출하세요. 각 도구 항목에는 inputSchema, outputSchema, examples가 포함되어 AI 에이전트나 클라이언트가 추측 없이 유효한 인수를 만들 수 있습니다.

tools/call에서는 표시용 값은 result.content[0].text에서, 기계 파싱용 값은 result.structuredContent에서 읽으세요. 도구 수준 실패는 isError: true를 반환하고, 프로토콜 수준 실패는 JSON-RPC error를 반환합니다.

tools/call 요청 예시:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"css-beautifier","arguments":{"input":".button{color:white;background:#3366cc;padding:8px 12px;}"}}}'

대부분의 텍스트 및 데이터 도구는 input 문자열과 선택적 options를 받습니다. 브라우저 이미지 API가 필요한 이미지 도구는 검색 대상으로 제공되며, 브라우저 기능이 필요할 때 웹 UI 링크를 반환합니다.