[카테고리:] 📐 웹 개발 · CSS 빌더
-
🎨 반응형 이미지 srcset & sizes 생성기
기준 가로폭만 넣으면 화면별 이미지 규격과 srcset·sizes 마크업을 만들고 미리볼 수 있습니다. 1. 이미지 정보 원본 이미지 경로 (URL / 파일명) 테스트용 기본 이미지가 들어가 있습니다. 본인 이미지…
-
🔠 화면 크기 따라 알아서 변하는 가변 폰트 CSS clamp 생성기
본문·제목 크기와 화면 가로폭을 넣으면 CSS clamp() 가변 폰트 코드를 만들고 바로 복사할 수 있습니다. 1. 글자 크기·비율·화면 폭 기본 본문 크기 (px) 많은 사이트에서 본문 기본값은 16px입니다.…
-
🎨 다크모드 컬러 매핑 & 튜닝 빌더
브랜드 메인 색 하나로 라이트·다크 배경·표면·텍스트·포인트 색 CSS 변수를 만들고 바로 복사할 수 있습니다. 1. 메인 색·다크 밝기 메인 색 HEX (6자리) # 다크용 메인 밝게 하기 (25%)…
-
✨ CSS 텍스트 오버레이 Blend-Mode 빌더
이미지 위 문구나 색 막을 mix-blend-mode로 맞춰 미리보고 붙일 CSS를 바로 복사해 보세요. 1. 오버레이 종류 무엇을 올릴까요? 문구 (텍스트 오버레이)색·그라데이션 막 2. 문구·합성 방식 문구 합성 방식…
-
📐 CSS Grid·Flexbox 레이아웃 생성기
Grid·Flexbox·메이슨리를 고르고 열 개수·간격·정렬만 조절하면 미리보기와 붙여 넣을 CSS를 바로 만들 수 있습니다. 1. 배치 방식과 간격 레이아웃 방식 CSS Grid (가로·세로 격자)Flexbox (한 방향 정렬)메이슨리 (column-count) 미리보기…
