여러분 모두 바쁘시다는 것을 알고 있기에, What’s !important #14에서는 브라우저 업데이트가 적었음에도 불구하고 내용이 꽉 찼던 지난 몇 주간의 소식들을 빠르게 살펴보고자 합니다. CSS Quake부터 CSS Gap Decorations까지, 이번 호는 놓치지 마세요!

Hyperblam: HTML로 음악 만들기

Heydon Pickering은 JavaScript 없이 음악을 생성하기 위해 Web Components를 사용하는 Web Audio API 기반의 HTML 구현체인 Hyperblam을 제작했습니다.

좋습니다, 아주 CSS적인 것은 아니지만 여전히 꽤 멋지네요!

CSS Quake

PolyCSS를 기반으로, Layoutit은 혁신적인 1996년 게임인 Quake를 포팅한 CSS Quake를 제작했습니다.

매우 CSS적이며, 최근 출시된 CSS DOOM과 함께 즐기기에 완벽한 동반자입니다.

CSS Gap Decorations 심층 탐구

Temani Afif는 gap decorations를 스타일링하는 방법을 보여주었습니다. 짐작하셨겠지만, 'gaps'는 flexbox, grid layout, 또는 multi-column layout을 사용할 때 gap이 차지하는 공간을 의미합니다. 솔직히 말해서 gap decorations는 오랫동안 기다려온 기능이었지만, Temani가 보여주었듯이 실제로 우리가 할 수 있는 일들이 아주 많습니다.

CodePen Embed Fallback

CSS random() 실험

Polypane는 자신들의 CSS random() 실험을 선보였습니다. 아직 Safari를 제외한 어떤 브라우저에서도 지원되지 않는 이 모호한 CSS 함수에 대해 궁금해하셨다면, Polypane는 보케(bokeh) 효과, 떨어지는 꽃잎, 어질러진 폴라로이드 사진 더미, 시(poem), 애니메이션 오로라 등을 만들어냈습니다. 이는 random()으로 할 수 있는 모든 것을 보여주는 듯한 매우 심도 있는 탐구입니다.

출처: Polypane.

<select>를 유동적으로 만드는 방법

Manuel Matuzović는 field-sizing을 사용하여 <select>의 너비를 선택된 <option>의 너비로 설정하는 방법 (더 구체적으로는 field-sizing: content)을 보여주었습니다. 이는 2주 전 Firefox 152에 탑재되면서 Baseline이 되었습니다.

또 다른 주의 사항은, <select>를 기본적으로 3개의 <option>을 보여주는 스크롤 가능한 리스트 박스로 변환하는 size 속성(예: <select size="3">)을 사용하는 경우, field-sizing: content가 이를 무시하고 모든 <option>을 보여준다는 점입니다.

CSS 테마의 새로운 표준

Una Kravets는 현대적인 CSS 테마가 작동하는 방식을 설명했습니다. 최근 이에 대해 아주 많이 접해왔지만, Una는 [@property](https://css-tricks.com/almanac/rules/p/property/), [light-dark()](https://css-tricks.com/almanac/functions/l/light-dark/), [contrast-color()](https://css-tricks.com/almanac/functions/c/contrast-color/), 그리고 @container style()에 대해 이야기합니다. 이 기능들은 모두 최근 Baseline에 포함되었으므로, 이 모든 기능이 어떻게 함께 작동하는지 살펴볼 수 있는 좋은 기회입니다.

CodePen Embed Fallback

말이 나온 김에, 저도 contrast-color()를 처음 탐색한 후 관련 글을 작성했습니다.

웹사이트가 모든 사람에게 동일하게 작동할 필요가 없는 이유

Bramus는 왜 웹사이트가 모든 사람에게 동일한 방식으로 작동할 필요가 없는지를 설명했습니다. 예를 들어, 플랫폼마다 주요 입력 방식(input modalities)이 다르며, 사용자가 선호하는 보조 입력 장치를 연결해 사용할 수도 있습니다. 이것이 바로 우리가 웹사이트를 모든 플랫폼에서 동일하게 만들어야 한다는 생각을 버려야 하는 이유입니다.

그는 또한 플랫폼에 따라 다르게 작동해야만 하는 세 가지 매우 흥미로운 웹 플랫폼 기능인 interest invokers, overscroll actions, 그리고 Document Picture-in-Picture API에 대해서도 이야기합니다.

Web Engines Hackfest에서의 Marina Aísa

모두가 여전히 CSS Day에 대해 이야기하고 있을 때 (저를 포함하여), 갈리시아의 아 코루냐(A Coruña, Galicia)에서는 Web Engines Hackfest가 시작되었습니다. 제가 이런 행사에서 좋아하는 점은 (물론 강연들 외에도) 참가자들이 강연에 대해 이야기하고, 만난 사람들에 대해 이야기하며, 그 도시에 머무는 동안 무엇을 했는지 등을 나누는 것입니다.

여기 Marina Aísa가 기록한 이 이틀간의 행사 내용이 있습니다. 갈리시아 숲에서의 하이킹을 시작으로, 웹 엔진(web engines)과 웹 표준(web standards)에 관한 이틀간의 강연(중간중간 암벽 등반도 포함됨), 그리고 마지막으로 브라우저가 웹 접근성(web accessibility)을 개선하기 위해 무엇을 할 수 있는지에 대한 논의로 이어집니다:

이번 주 저는 @webengineshackfest.org에 참석하기 위해 갈리시아 아 코루냐에 와 있습니다 👩‍💻. 이곳에서 우리는 웹 엔진과 표준의 미래에 대해 논의하고 있습니다. 향후 웹 개발에 미칠 잠재적 영향을 고려할 때, 행사에서 작성한 저의 개인적인 노트 일부를 공유하는 것이 도움이 될 것이라고 생각했습니다. ✍️👇

— Marina Aísa (@marinaaisa.com) 2026년 6월 16일 14:31

내년 개인적인 목표: 이런 행사 중 하나에 꼭 참석하기!

새로운 웹 플랫폼 기능들

• Firefox 152
  • field-sizing (현재 Baseline)

네, 안정화된 브라우저들에게는 다소 지루한 몇 주였지만, 정말 흥미로운 것들이 다가오고 있습니다. 저희의 Quick Hits를 계속 주목해 주세요. 그곳에서 이러한 웹 플랫폼 업데이트(그리고 개발 중인 브라우저의 업데이트)를 가장 먼저 공유하기 때문입니다. 사실, Chrome 150이 오늘 중으로 출시될 예정입니다.

2주 뒤에 만나요!