CSS 코드 생성과 HTML 태그 처리 도구
오프셋·블러·확산·색상·투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인합니다. inset 안쪽 그림자를 지원합니다.
텍스트와 배경 색상의 대비율을 계산하고 WCAG 2.x AA·AAA 접근성 기준 통과 여부를 판정합니다. 웹 접근성 점검에 유용합니다.
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
기준 색상에서 밝은 톤과 어두운 톤의 HEX 팔레트를 생성합니다. 디자인 시스템의 색 단계를 만들 때 유용합니다.
최소·최대 크기와 뷰포트 범위로 반응형 clamp() 코드를 만듭니다. 미디어쿼리 없이 폰트 크기가 화면 폭에 따라 부드럽게 변하는 fluid typography에 사용합니다.
CSS에서 주석과 불필요한 공백을 제거해 파일 크기를 줄입니다. 문자열 값은 보존합니다.
px·rem·em·pt·% 를 기준 폰트 크기에 맞춰 상호 변환합니다. 반응형 타이포그래피 작업에 유용합니다.
두 색상과 각도로 CSS linear-gradient·radial-gradient 코드를 만들고 실시간 미리보기로 확인합니다. 중간색 정보도 제공합니다.
엑셀에서 복사한 데이터나 쉼표 구분 텍스트를 HTML <table> 코드로 변환합니다. 특수문자는 자동 이스케이프됩니다.
HTML에서 태그·주석·스크립트를 제거하고 순수 텍스트만 추출합니다. 엔티티도 디코딩합니다.
CSS로 그림자나 그라디언트를 만들 때는 값을 조금씩 바꿔 가며 눈으로 확인하는 과정이 필수입니다. 코드를 고치고 새로고침하기를 반복하면 시간이 오래 걸립니다.
이 카테고리의 생성기들은 슬라이더와 색상 선택기로 값을 조절하면 미리보기가 즉시 바뀌고 완성된 CSS 코드가 함께 나옵니다. 그림자, 그라디언트, 반응형 clamp() 함수, 색상 팔레트를 이런 방식으로 만들 수 있습니다.
색상 대비 검사기는 성격이 조금 다릅니다. 만드는 도구가 아니라 검증하는 도구로, 글자와 배경의 대비가 웹 접근성 기준(WCAG AA·AAA)을 만족하는지 판정합니다. 공공기관 사이트나 접근성 심사를 준비한다면 반드시 거쳐야 하는 확인입니다.