HTML CSS JS 온라인 에디터·CSS 생성기 (그림자·그라디언트)베타

HTML CSS JS 온라인 에디터·CSS 생성기 (그림자·그라디언트) 소개

HTML·CSS·JS 세 칸에 쓴 코드는 600ms 동안 입력이 멈추면 하나의 HTML 문서로 합쳐져 미리보기 iframe의 srcdoc에 들어갑니다. CSS는 head의 style 태그에, HTML은 body에, JS는 body 맨 끝의 script 태그에 들어가므로 스크립트가 실행될 때 이미 요소가 다 만들어져 있습니다. DOMContentLoaded를 기다리지 않아도 getElementById가 동작하는 이유입니다.

이 페이지에는 예전에 따로 있던 CSS 생성기 네 개(box-shadow, border-radius, 그라디언트, cubic-bezier 이징)가 탭으로 들어 있습니다. 생성기에서 만든 값을 CSS 칸에 붙여 바로 실제 요소에 적용해 볼 수 있습니다. 아래에서는 미리보기가 격리되는 방식과, 각 생성기가 다루는 CSS 속성이 규격상 어떻게 계산되는지를 설명합니다.

미리보기 iframe은 어떻게 격리되나

미리보기 iframe에는 sandbox=「allow-scripts allow-modals allow-forms allow-popups」가 붙어 있고 allow-same-origin은 빠져 있습니다. allow-same-origin이 없으면 문서는 어떤 사이트와도 같지 않은 불투명(opaque) 출처로 취급되어, 이 사이트의 쿠키나 저장소에 접근할 수 없습니다. MDN은 allow-scripts와 allow-same-origin을 함께 쓰면 내부 문서가 sandbox 속성 자체를 지울 수 있어 샌드박스가 없는 것과 같아진다고 경고합니다. 이 도구가 둘 중 하나를 뺀 것은 그 때문입니다.

그 결과 연습 코드에서 localStorage나 document.cookie를 쓰면 오류가 나거나 아무 것도 저장되지 않습니다. 코드 문제가 아니라 격리 때문이니, 저장 기능을 시험하려면 「HTML 파일로 저장」으로 내려받아 브라우저에서 직접 여세요. alert·confirm은 allow-modals 덕분에 뜨고, window.open과 target=「_blank」 링크는 allow-popups 덕분에 열립니다.

콘솔 패널은 iframe 안에 먼저 심어 둔 작은 스크립트가 console.log·warn·error와 잡히지 않은 오류를 postMessage로 부모 창에 보내서 채워집니다. 부모는 메시지를 보낸 창이 지금의 iframe인지, 실행 번호(runId)가 최신인지 확인하므로 이전 실행에서 늦게 도착한 로그는 버립니다. 오류 줄 번호는 합쳐진 문서 기준이 아니라 JS 칸 기준으로 다시 계산해서 보여 줍니다.

JS 칸에 </script>를 쓰면

HTML 파서는 script 태그 안의 내용을 JavaScript 문법과 상관없이 읽다가 </script>를 만나면 거기서 태그를 닫습니다. 그래서 문자열 안에 「</script>」가 있으면 스크립트가 중간에 잘립니다. 이 도구는 합칠 때 JS 칸의 </script를 <\/script로, CSS 칸의 </style을 <\/style로 바꿔 넣습니다. 직접 만든 HTML 파일에 스크립트를 인라인으로 넣을 때도 같은 처리가 필요합니다.

box-shadow: 여러 겹을 쌓는 순서

box-shadow는 쉼표로 여러 그림자를 이을 수 있고, 먼저 쓴 것이 위에 그려집니다. 한 겹은 offset-x, offset-y, blur, spread, 색상과 선택적 inset으로 이루어집니다. blur는 음수가 될 수 없고, spread는 음수면 그림자를 줄입니다. 그림자는 레이아웃 크기에 영향을 주지 않아서 큰 그림자를 넣어도 옆 요소가 밀리지 않습니다.

자연스러운 그림자는 보통 두 겹으로 만듭니다. 짧고 진한 그림자는 물체가 바닥에 닿은 부분을, 길고 옅은 그림자는 멀리 퍼진 빛을 흉내 냅니다. 뉴모피즘 프리셋은 한쪽에 회색, 반대쪽에 흰색 그림자를 둬서 배경에서 솟은 것처럼 보이게 하는데, 배경색이 그림자 색과 비슷해야만 효과가 납니다. 생성기는 blur·spread가 0이어도 네 값을 항상 모두 적고, 색은 rgba()로 통일해 출력합니다.

border-radius: 반지름이 상자보다 크면

모서리 반지름의 합이 한 변의 길이를 넘으면 규격(CSS Backgrounds 3)은 모든 반지름에 같은 비율 f = min(변 길이 / 그 변에 닿는 두 반지름의 합)을 곱해 줄입니다. 그래서 200×100px 상자에 border-radius: 100px을 주면 세로 변에서 합이 200px이 되어 f = 0.5, 모든 모서리가 50px로 줄어 알약 모양이 됩니다. 반면 50%는 가로 반지름이 폭의 50%, 세로 반지름이 높이의 50%라 타원이 됩니다. 알약 모양을 원하면 %가 아니라 충분히 큰 px 값을 쓰는 이유입니다.

슬래시(/) 앞은 가로 반지름, 뒤는 세로 반지름입니다. 생성기의 블롭(무작위) 모양은 네 모서리의 가로·세로 값을 모두 다르게 해서 이 8개 값을 쓰고, 값이 같으면 margin처럼 1~3개 값으로 줄여 적습니다.

그라디언트 색은 어느 공간에서 섞이나

빨강(#ff0000)에서 초록(#00ff00)으로 가는 선형 그라디언트의 한가운데는 sRGB 값을 그대로 평균해서 #808000, 탁한 올리브색이 됩니다. 생성기가 중간에 정지점을 추가할 때 계산하는 색도 이 값입니다. CSS Color 4는 hex·rgb() 같은 옛 문법 색만 쓰면 기본을 sRGB로 두고, CSS Images 4부터는 linear-gradient(in oklch, ...)처럼 보간 색공간을 직접 지정할 수 있습니다. 색상환에서 멀리 떨어진 두 색을 이을 때 가운데가 칙칙해지면 oklab이나 oklch를 지정해 보세요.

투명도가 섞일 때 브라우저는 색을 알파로 미리 곱한(premultiplied) 상태에서 보간합니다. 그래서 빨강에서 rgba(0,0,0,0)으로 가는 그라디언트의 가운데는 검게 물들지 않고 반투명한 빨강으로 보입니다. 그라디언트 생성기도 두 색 지점 사이를 클릭해 지점을 넣을 때 같은 방식으로 섞어, 빨강과 투명 사이 50% 지점에는 rgba(255, 0, 0, 0.5)가 들어갑니다.

cubic-bezier: 네 숫자가 뜻하는 것

cubic-bezier(x1, y1, x2, y2)는 (0,0)에서 (1,1)로 가는 곡선의 두 조절점입니다. x는 시간, y는 진행률입니다. CSS Easing 규격은 x1·x2가 0~1 범위를 벗어나면 값을 무효로 처리하고, y는 제한이 없습니다. y가 1을 넘으면 목표를 지나쳤다가 돌아오는 튕김(overshoot)이 생깁니다. 이 편집기에서 핸들을 끌 때는 그래프에 보이는 범위(y -0.8~1.9) 안에서만 움직이고, 그보다 큰 값은 숫자 칸이나 붙여넣기로 넣으면 자르지 않고 그대로 씁니다.

• ease = cubic-bezier(0.25, 0.1, 0.25, 1): transition의 기본값
• ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1)
• ease-in-out = (0.42, 0, 0.58, 1)
• linear = (0, 0, 1, 1)

예시

사용 방법

1. 위쪽 탭에서 에디터나 CSS 생성기를 고릅니다.
2. 코드를 고치면 잠시 뒤 미리보기와 콘솔이 갱신됩니다. 생성기 값은 복사해 CSS 칸에 붙입니다.
3. 공유 버튼으로 링크를 만들거나 HTML 파일로 저장합니다.

자주 묻는 질문