Bob's Multi Tool

CSS 포매터

CSS코드개인정보: 브라우저 로컬

CSS 포매터

압축되거나 흐트러진 CSS를 읽기 좋은 블록으로 정리해 스타일 수정과 리뷰를 쉽게 합니다.

입력 / 출력

도구부터 사용

입력, 출력, 복사 작업은 이 영역에 모았습니다. 예제와 검토 내용은 아래에서 따로 확인합니다.

복사 가능한 출력

로컬 세션

입력 상태를 이 브라우저에만 저장해 계정 없이 마지막 작업을 복원할 수 있습니다.

결과 확인 후 검토

기본 입력/출력 흐름이 끝난 뒤 필요한 예제, 확인 목록, 관련 도구만 펼쳐 봅니다.

웹 운영 점검 워크벤치

CSS 스니펫 검토

CSS 스니펫을 정리하고 CSS 검토 보고서를 복사한 뒤 압축과 색상 대비까지 확인합니다.

3 도구
  1. 1. CSS

    스니펫을 정리하고 selector, token, cascade, specificity, checklist 신호가 담긴 보고서를 복사합니다.

  2. 2. CSS Min

    압축 CSS를 공유해야 한다면 압축률, 주석 제거, minify 검토 보고서를 확인합니다.

  3. 3. Color

    스니펫이 전경/배경 색상을 바꾸면 color token을 WCAG 대비 기준으로 확인합니다.

색상 접근성 확인

전경/배경 색상을 변환하고 WCAG 대비 리포트를 복사한 뒤 배포 전 CSS 토큰과 시각 자산을 검토합니다.

3 도구
  1. 1. Color

    HEX/RGB/HSL 조합을 변환하고 AA/AAA 기준을 확인한 뒤 접근성 리포트를 복사합니다.

  2. 2. CSS

    변경을 커밋하기 전에 CSS 토큰 이름, 선택자, 중복 색상 값을 검토합니다.

  3. 3. Favicon

    브랜드 이니셜이나 작은 아이콘이 선택한 배경에서 또렷하게 보이는지 확인합니다.

복사 전 확인

  • selector, media query, custom property가 원래 block에 붙어 있는지 확인합니다.
  • 대상 breakpoint에서 formatted CSS를 실제 화면으로 확인합니다.
  • CSS 포매터 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토합니다.

흔한 실패 사례

  • formatting은 selector specificity나 cascade 결과를 바꾸지 않습니다.
  • media query나 container context 없이 block만 복사하면 실제 layout에서 다르게 보일 수 있습니다.

관련 도구

CSS MinCSS 공백과 주석을 줄이고 압축률, selector 수, comment 제거 위험을 확인한 뒤 복사합니다.다음 단계: CSS 공백과 주석을 줄이고 압축률, selector 수, comment 제거 위험을 확인한 뒤 복사합니다.CSS Unitpx, rem, em, percent 값을 CSS 레이아웃과 타이포그래피 계산에 맞게 변환하는 도구입니다.다음 단계: px, rem, em, percent 값을 CSS 레이아웃과 타이포그래피 계산에 맞게 변환하는 도구입니다.Clamp반응형 font-size와 spacing에 쓸 CSS clamp() 값을 min/max 범위로 생성하는 도구입니다.다음 단계: 반응형 font-size와 spacing에 쓸 CSS clamp() 값을 min/max 범위로 생성하는 도구입니다.
  • selector, media query, custom property가 원래 block에 붙어 있는지 확인합니다.
  • 대상 breakpoint에서 formatted CSS를 실제 화면으로 확인합니다.
  • CSS 포매터 결과가 다음 단계에 맞는지 관련 도구로 이어서 검토합니다.
CSS 포매터 - 무료 온라인 코드 도구 | bobob.app