0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
설정
CSS 및 SCSS 스타일 시트를 일관된 들여쓰기로 포맷하고 구성하세요. 들여쓰기 및 줄 간격 옵션을 설정하고, 코드를 에디터에 붙여넣은 후 포맷하세요.
소스 코드
라인:0캐릭터:0
작동 방식
압축되거나 정렬이 흐트러진 CSS 또는 SCSS 스타일시트를 다시 들여쓰고 정리해 읽기 쉽게 만듭니다. 축소된 스타일을 살펴보거나 타사 CSS를 검토하거나 저장 전에 형식을 통일하는 데 유용합니다.
들여쓰기 종류(공백 또는 탭), 들여쓰기 크기, 줄 끝을 선택할 수 있습니다. 각 선언은 자체 줄에 놓이고 쉼표로 구분된 선택자는 별도의 줄에 배치됩니다.
처리는 js-beautify로 브라우저에서 완전히 로컬로 이루어집니다. 표현 형식만 정리하며, 축소하거나 속성을 재정렬하거나 규칙이 올바른지 검증하지 않습니다.
예시
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}선택자는 줄로 나뉘고 각 속성은 들여쓰기됩니다.활용 사례
- 사이트의 축소된 .css 파일을 읽기 쉽게 만들기.
- 커밋 전에 스타일시트의 들여쓰기를 표준화하기.
- 프레임워크나 라이브러리의 CSS 규칙을 검토하고 비교하기.
- 문서나 생성기에서 붙여넣은 SCSS를 정리하기.
자주 묻는 질문
SCSS나 LESS에도 사용할 수 있나요?
중첩 규칙을 포함해 CSS와 SCSS 같은 호환 구문을 서식 지정합니다. SCSS나 LESS를 CSS로 컴파일하지 않고 들여쓰기와 줄바꿈만 재배치합니다.
속성을 재정렬하거나 그룹화하나요?
아니요. 선택자와 선언의 원래 순서를 유지합니다. 가독성을 높이기 위해 간격, 들여쓰기, 줄바꿈만 변경합니다.
CSS를 압축하는 것과 같은 건가요?
아니요, 반대입니다. 서식 지정은 더 잘 읽도록 공백과 줄바꿈을 추가하고, 압축은 파일 크기를 줄이려고 이를 제거합니다. 압축하려면 압축 도구를 사용하세요.
내 코드가 서버에 업로드되나요?
아니요. 서식 지정은 모두 브라우저에서 이루어지며, CSS은(는) 컴퓨터를 벗어나지 않습니다.