CSS
페이지에서 스타일 수집
URL을 입력하세요. Milten이 접근 가능한 스타일시트를 읽고 반복되는 색상, 글꼴, 크기, 간격, 모서리 반경, 그림자와 사용자 정의 속성을 묶어 보여줍니다.
사이트의 색상, 글꼴 및 간격
페이지의 색상, 글꼴 및 간격을 하나의 보고서로 모으세요. 반복 값과 스타일 차이를 찾아 디자인 통일을 준비하세요.
스캐너 작동 방식
CSS 소스에서 값의 빈도 요약까지
빈도
반복되는 값 그룹화
보고서는 동일한 색상, 글꼴, 크기, 간격, border-radius, box-shadow, CSS 변수가 얼마나 자주 나타나는지 계산합니다. 값이 더 자주 반복될수록 시스템 토큰에 더 가깝습니다.
요약
집중도와 분산 표시
요약은 값이 일관되게 반복되는 곳과 인터페이스에 색상, 크기, 글꼴, 그림자가 넓게 분산된 곳을 빠르게 확인하는 데 도움이 됩니다.
읽기
먼저 검토할 항목을 선택하도록 도움
반복되는 색상, 글자 크기와 간격을 컴포넌트에서의 역할과 함께 비교하세요. 비슷한 값도 의도된 차이일 수 있습니다. CSS 요약은 토큰 계획에 도움을 주지만, 완성된 디자인 시스템이나 의미에 따른 이름을 자동으로 만들지는 않습니다.
보고서에 포함된 내용
일곱 가지 디자인 값 그룹
색상
반복되는 색상
스캐너는 색상 값과 사용 횟수를 보여주므로 시스템 색상과 우연히 생긴 로컬 색조를 구분할 수 있습니다.
값사용
폰트
글꼴과 텍스트 크기
보고서에는 감지된 font-family 값, 해당 값이 나타나는 빈도, 반복되는 font-size 값이 포함됩니다.
font-familyfont-size
간격 / 크기
크기, margin, padding, width, height
요약은 자주 사용되는 크기와 간격 값을 강조합니다. 여기서 분포가 넓으면 보통 그리드 일관성이 약하다는 신호입니다.
pxrem
반경 / 그림자
반경과 그림자
별도 그룹은 반복되는 border-radius와 box-shadow 값을 보여주며, 한 값이 다른 값보다 더 자주 나타나는 경우도 포함합니다.
반경그림자
CSS 변수
감지된 사용자 정의 속성
스캐너는 CSS 사용자 정의 속성과 사용 횟수를 보여주므로 어떤 변수가 이미 토큰처럼 작동하는지 확인할 수 있습니다.
--var사용
FAQ
CSS 토큰 스캐너에 대한 자주 묻는 질문
어떤 값이 보고서에 포함되는지, 빈도 요약을 어떻게 읽는지에 대한 간단한 답변입니다.
CSS 토큰 스캐너는 CSS 변수 내보내기와 어떻게 다른가요?
더 넓게 살펴봅니다. 사용자 정의 속성 외에도 보고서는 반복되는 색상, 글꼴, font-size 값, 크기, 간격, border-radius, box-shadow를 보여줍니다. 모든 값에서 사용 빈도가 중요합니다.
저장소 접근 없이 사이트를 분석할 수 있나요?
예. 첫 번째 분석은 공개 페이지와 연결된 스타일에 대해 실행할 수 있습니다. CSS의 일부가 인증 뒤에 있거나 페이지에서 로드되지 않으면 요약에 포함되지 않습니다.
보고서에 토큰 충돌이 표시되나요?
보고서는 반복되는 값과 분포를 보여줍니다. 의미상 충돌을 판단하거나 토큰 이름을 제안하지는 않습니다. 토큰 구성은 팀에서 결정하세요.
토큰이 이미 있어도 스캐너가 유용한가요?
예. 보고서는 어떤 CSS 변수가 발견되었고 얼마나 자주 사용되는지, 그리고 주변에 반복되는 원시 값이 여전히 어디에 있는지(색상, 크기, 간격, 그림자)를 보여줍니다.
비어 있거나 드문 값은 어떻게 읽어야 하나요?
드물게 쓰이는 값도 중요한 상태나 컴포넌트에 속할 수 있습니다. 병합하거나 삭제하기 전에 사용 위치를 확인하세요. 빈도는 조사 순서를 정하는 데 도움이 되지만 어떤 값을 하나의 토큰으로 묶을지 결정하지는 않습니다.
관련 서비스
이 서비스 다음으로 점검할 항목
CSS 감사
용량이 큰 스타일시트, 중복, 로딩 중 사용되지 않은 스타일을 찾아보세요. 사용되지 않은 스타일도 다른 페이지나 사용자 동작 후에 필요할 수 있습니다.
열기HTML 점검
HTML 오류와 지나치게 복잡한 페이지 구조를 찾아보세요. 보고서에서 관련 요소를 확인할 수 있습니다.
열기접근성
자동 점검으로 접근성 문제와 개선 제안을 확인하세요. 접근성을 종합적으로 평가하려면 수동 점검도 필요합니다.
열기JavaScript 점검
JavaScript 파일, 로딩 오류, 로딩 중 사용되지 않은 코드를 확인하세요. 더 자세히 살펴볼 스크립트를 찾아보세요.
열기