What’s !important #13: @function, alpha(), CSS Wordle, 그리고 더 많은 것들

CSS 함수(CSS functions), alpha() 함수, Grid Lanes, 여러분이 잘 모를 수도 있는 <dialog>에 관한 몇 가지 사항, CSS Wordle, 그리고 더 많은 것들 — 이것이 지금의 What’s !important입니다.

전문가가 설명하는 CSS 함수 (CSS functions)

Jane Ori는 CSS 함수가 어떻게 작동하는지 전문가답게 설명했습니다. @function은 올해 Baseline에 포함될 가능성이 가장 높은 CSS 기능일 것이기에, 저도 처음에는 조금 겁이 났습니다. 하지만 Jane의 단계별 가이드를 읽고 나니 정말 잘 이해할 수 있었습니다.

또한, Declan Chidlow가 작성한 @function 문서는 나중에 빠르게 참조할 수 있도록 북마크해 두는 것이 좋습니다.

alpha() 함수

함수 이야기가 나와서 말인데, alpha() 함수는 저를 놀라게 했습니다. 첫째로, 들어본 적이 없었기 때문이고, 둘째로... 왜? 라는 의문 때문입니다. 우리는 이미 알파 채널(alpha channel)을 변경할 수 있습니다:

/* 이렇게 */
color: alpha(from var(--color) / 0.5);

...

음, Jason Leo의 이 댓글이 이를 요약해 줍니다. 우선, 이는 이미 CSS 변수(CSS variables)를 가지고 있을 때 색상 값을 하드코딩(hard-code)할 필요가 없음을 의미합니다. 수년 동안 저는 CSS 변수에 실제 값만 저장하는 방식으로 이를 우회해 왔지만, 매번 색상 함수(color function)로 감싸야 하는 작업은 정말 단조롭습니다:

/* 값만 저장 */
--color: 0.65 0.23 230;

...

하지만 (제 생각에는) 이것보다는 낫습니다:

/* 함수와 값 모두 포함 */
--color: oklch(0.65 0.23 230);

...

alpha()는 이 두 가지 방식의 장점을 모두 제공합니다:

/* 덜 지루한 방식 */
color: alpha(from var(--color) / 0.5);

둘째로, 이 문맥에서는 색상 형식(color format)이 실제로 중요하지 않기 때문에, alpha(from var(--color) / 0.5)는 oklch(from var(--color) l c h / 0.5)보다 의도를 더 명확하게 전달합니다. 또한 선언 자체를 본질적으로 더 짧게 만들어 줍니다.

alpha()를 제안해 준 Adam Argyle에게 감사를 표합니다.

Grid Lanes 가이드

WebKit이 Field Guide to Grid Lanes (이전에는 CSS masonry layout으로 알려짐)를 출시했습니다. 만약 여러분이 우리의 CSS-Tricks 가이드 중 하나를 읽어본 적이 있다면, 그것과 유사할 것입니다 (그들의 표현을 빌리자면 — 그냥 그렇다는 겁니다). 다양한 기초적인 데모와 실제 사례 데모를 통해 부드럽게 입문할 수 있습니다.

출처: WebKit.

<dialog>를 위한 삶의 질(Quality-of-life) 업그레이드

Una Kravets는 [<dialog>를 위한 두 가지 삶의 질(quality-of-life) 업그레이드](https://bsky.app/profile/una.im/post/3mnf4c2gb5s2m)에 대해 이야기했습니다. 아직 Safari에서 지원되지 않는 새로운 closedby속성과overscroll-behavior: contain입니다. 댓글에는 scrollbar-gutter: stable`에 관한 팁을 포함하여 몇 가지 유용한 정보들도 있습니다.

✅ 멋진 작은 버튼 축소 🙈 스크롤바가 사라지면서 발생하는 레이아웃 변경 🙈 라이트 디스미스(light dismiss) 불가. 이러한 UX 문제들은 다음과 같이 쉽게 해결할 수 있습니다: – closedby="any" – overscroll-behavior: contain

[image or embed]

— Una Kravets (@una.im) 13:28 · Jun 3, 2026

또한, Chris Coyier는 <dialog> 요소를 애니메이션화하는 방법을 보여주었는데, 우리 중 많은 이들이 이미 그 방법을 알고 있을 것이라 생각하지만, 정말 실수하기 쉬운 부분입니다. 저는 매번 구글링을 해야 합니다 (그놈의 @starting-style 때문이죠).

CSS Day 2026에서는 어떤 일이 있었나요?

매년 열리는 CSS 커뮤니티 컨퍼런스인 CSS Day가 이번 달 11일과 12일에 암스테르담에서 개최되었습니다 (엄밀히 말하면 이틀간 진행되었습니다). 올해는 라이브 스트리밍이 없었지만, 6월 말에 녹화본이 공개될 예정입니다. 그때까지는 Bluesky의 CSS Day와 #CSSDay Bluesky 피드를 확인하여 무대 위에서 어떤 일이 있었는지, 무대 뒤에서는 어떤 일이 있었는지, 그리고 일부 강연의 슬라이드까지 확인해 보세요.

출처: CSS Day.

그리고 아니요, 올해 화염방사기는 없었지만, DOOM(둠)으로부터 완전히 자유롭지도 않았습니다 (아는 분들은 아시겠죠).

CSS Wordle

CSS Day에서 일어난 모든 일들을 포함해 정말 대단한 한 주였습니다. 하지만 만약 에너지가 조금이라도 남아 있다면, 제가 지난 한 주 동안 말 그대로 집착했던 Sunkanmi Fafowora의 CSS Wordle를 한 판(혹은 여러 판) 해보시길 강력히 추천합니다.

출처: CSS-Questions (걱정 마세요, 이건 어제의 정답입니다).

새로운 웹 플랫폼 기능 및 업데이트

새로운 웹 플랫폼 기능 및 업데이트

• Chrome 149
  • Gap decorations (이제 Baseline 지원)
  • image-rendering: crisp-edges (이제 Baseline 지원)
  • rect() 및 xywh()를 이용한 shape-outside (이제 Baseline 지원)
  • path() 및 shape()를 이용한 shape-outside (Safari 또는 Firefox 지원 안 함)

다음 시간에 만나요!