카테고리
CSS 생성기
CSS는 쓰기는 쉽지만 머릿속에 그리기는 어렵습니다. 네 겹의 box-shadow, 색 지점이 다섯 개인 conic 그라데이션, clip-path 다각형은 스타일시트에서 짐작하기보다 끌어서 맞추는 편이 빠릅니다. 여기 있는 생성기는 속성 묶음마다 실시간 미리보기를 주고 꼭 필요한 CSS만 내놓습니다. 깊이와 빛은 CSS 박스 그림자 생성기와 CSS 텍스트 그림자 생성기, 선형·원형·원뿔 채움은 CSS 그라데이션 생성기, 모양은 CSS Border Radius 생성기와 CSS Clip-path 생성기, 효과와 움직임은 CSS 필터 생성기와 CSS Transform 생성기가 맡습니다.
레이아웃에는 한 쌍이 따로 있습니다. CSS Grid 생성기와 CSS Flexbox 생성기는 트랙, 간격, 정렬, 줄바꿈을 바꾸며 요소가 움직이는 모습을 보여 주므로 justify-content와 align-items가 왜 그렇게 동작하는지 가장 빨리 이해할 수 있습니다. CSS 다단(Multi-column) 생성기는 잡지식 텍스트 흐름을, CSS object-fit 미리보기는 cover와 contain이 이미지를 어떻게 잘라 내는지를 보여 주고, Cubic Bezier 이징 생성기는 끌어서 만든 곡선을 transition timing function으로 바꿔 줍니다.
세 번째 묶음은 개별 효과가 아니라 시스템을 다룹니다. CSS clamp() 생성기, CSS 타이포그래피 생성기, CSS 간격 스케일 생성기는 유동 타입과 일관된 간격을 커스텀 속성으로 만들어, 브레이크포인트를 잔뜩 두지 않고도 제목이 폰과 데스크톱 사이에서 부드럽게 커지게 합니다. CSS 미디어 쿼리 생성기, CSS 컨테이너 쿼리 생성기, CSS @scope 생성기, CSS 캐스케이드 레이어 빌더는 반응형 규칙과 명시도 관리를 돕습니다. 모두 브라우저에서 실행되며 만든 내용은 업로드되지 않습니다.
CSS 생성기 도구 19개
고르는 법
글자가 화면에 따라 커져야 할 때
제목과 간격에는 CSS clamp() 생성기로 시작하고, 줄 간격과 줄 길이는 CSS 타이포그래피 생성기로 정하세요. 최소·최대 크기를 어떻게 고를지 모르겠다면 유동 타이포그래피 가이드를 먼저 읽어 보세요.
페이지 레이아웃을 만들 때
행과 열을 함께 다루는 2차원 레이아웃에는 CSS Grid 생성기를, 도구 모음이나 카드 행처럼 한 방향으로 늘어놓을 때는 CSS Flexbox 생성기를 쓰세요. 컴포넌트가 창이 아니라 자기 너비에 맞춰 바뀌어야 한다면 CSS 컨테이너 쿼리 생성기가 맞습니다.
깊이나 시각적 강조가 필요할 때
CSS 박스 그림자 생성기의 겹친 그림자는 현실적인 높이감을, CSS 그라데이션 생성기는 배경과 테두리를 만들고, CSS 필터 생성기와 CSS 텍스트 그림자 생성기는 이미지와 글자 효과를 맡습니다.
CSS끼리 충돌할 때
CSS 캐스케이드 레이어 빌더는 @layer 규칙의 순서를 정해 레이어 사이에서는 명시도가 영향을 주지 않게 하고, CSS @scope 생성기는 스타일 블록이 적용되는 범위를 제한합니다.