CSS코드개인정보: 브라우저 로컬
CSS 포매터
압축되거나 흐트러진 CSS를 읽기 좋은 블록으로 정리해 스타일 수정과 리뷰를 쉽게 합니다.
입력 / 출력
도구부터 사용
입력, 출력, 복사 작업은 이 영역에 모았습니다. 예제와 검토 내용은 아래에서 따로 확인합니다.
로컬 세션
입력 상태를 이 브라우저에만 저장해 계정 없이 마지막 작업을 복원할 수 있습니다.
결과 확인 후 검토
기본 입력/출력 흐름이 끝난 뒤 필요한 예제, 확인 목록, 관련 도구만 펼쳐 봅니다.
예제
이 도구를 시작하기 좋은 입력값.card{display:flex;color:#111}@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}:root{--gap:16px}.panel{padding:var(--gap);border:1px solid #ddd}사용 사례
코드- 압축되거나 흐트러진 CSS를 읽기 좋은 블록으로 정리해 스타일 수정과 리뷰를 쉽게 합니다.
- 브라우저 로컬 방식으로 입력을 다루며 복사 전 결과를 확인합니다.
- selector, media query, custom property가 원래 block에 붙어 있는지 확인합니다.
- 대상 breakpoint에서 formatted CSS를 실제 화면으로 확인합니다.
- CSS 포매터 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토합니다.