CSS를 눈으로 보면서 만들기
누구나 시행착오로 짜는 CSS 네 가지를, 스타일시트가 아니라 슬라이더 위에서 시행착오를 거치게 만들었습니다.
- 브라우저 안에서 전부 처리됩니다
- 오프라인에서도 작동합니다
- 업로드 없음
- 가입 없음
- 워터마크 없음
도구를 불러오는 중…
작동 방식
- 패널을 고르세요. 그라디언트, 그림자, 모서리, 반응형 크기 중에서요.
- 미리보기가 원하는 모습이 될 때까지 슬라이더를 움직이세요.
- CSS 한 줄을 복사하세요.
왜 아무것도 업로드되지 않는가
이 페이지가 하는 모든 작업은 브라우저 탭 안에서 도는 코드가 처리합니다. 웹 페이지를 그리는 그 엔진을 그대로 씁니다. 파일은 디스크에서 탭의 메모리로 읽어 들여 거기서 변환한 뒤 다시 다운로드 파일로 내보냅니다. 어디로도 전송되지 않습니다. 우리에게도, 제3자에게도.
직접 확인해 보세요
- 브라우저 개발자 도구(F12)를 열고 네트워크(Network) 탭을 선택합니다.
- 파일을 올리고 도구를 실행합니다.
- 보이는 요청은 도구 자체의 코드를 받아 오는 것뿐입니다. 무거운 몇몇 도구는 공개 CDN에서 오픈소스 엔진을 함께 받아 옵니다. 여기에 loreatec.jp로 가는 작은 방문 집계 신호 하나(페이지 주소와 제목, 그 이상은 없습니다)가 더해집니다. 어느 것도 당신의 파일을 실어 나르지 않습니다.
자주 묻는 질문
clamp() 패널은 실제로 무엇을 계산하나요?
기울기, 즉 선형 변화율입니다. “화면 너비 360px에서 16px, 1280px에서 32px”라고 정하면 clamp(16px, 8.3px + 2.17vw, 32px)가 나옵니다. 값은 지정한 두 너비 사이에서 매끄럽게 변하고 양 끝에서 멈춥니다. 공식은 단순하지만 아무도 외우고 있지 않습니다. 이 도구가 하는 일은 그게 전부입니다.
그림자 프리셋이 직접 만든 그림자보다 나아 보이는 이유는요?
실제와 비슷한 그림자는 감으로 만든 것보다 불투명도는 낮고, 흐림은 크고, 퍼짐(spread)은 살짝 음수이기 때문입니다. 프리셋은 그 비율을 그대로 담고 있으니, 0 0 5px black에서 시작하는 대신 프리셋 하나를 고른 뒤 조정하세요.
울퉁불퉁한 유기적인 모서리 모양도 만들 수 있나요?
모서리별(per-corner) 옵션을 켜고 네 반지름을 따로 정하세요. 마주 보는 모서리를 크게 하면 나뭇잎이나 물방울 같은 모양이 나옵니다. 완전히 유기적인 형태를 만들려면 이 패널의 범위를 벗어나는 두 값짜리 반지름 문법이 필요합니다. 여기 있는 것은 실제로 사람들이 쓰는 모양들입니다.
어디론가 전송되는 것이 있나요?
없습니다. 미리보기는 당신이 정한 스타일이 적용된 div 하나일 뿐입니다. 어떤 도구든 이보다 더 기기 안에서만 머물 수는 없습니다.