---
type: bookmarks
tags: ['css']
status: release
ctime: 2022-04-09
mtime: 2026-07-27
---

최신 CSS 기능 및 트렌드

- [Things You Can Do With CSS Today — Smashing Magazine](https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/)
- [The Future of CSS: Cascade Layers (CSS @layer)](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/)
- [The Undeniable Utility Of CSS :has • Josh W. Comeau](https://www.joshwcomeau.com/css/has/)
- [An Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide/)
- [컨테이너 쿼리 사용 방법 | web.dev](https://web.dev/blog/how-to-use-container-queries-now?hl=ko)
- [What if you used Container Units for everything?](https://frontendmasters.com/blog/what-if-you-used-container-units-for-everything/)

레이아웃과 반응형 디자인

- [Fluid Sizing Instead Of Multiple Media Queries? — Smashing Magazine](https://www.smashingmagazine.com/2022/08/fluid-sizing-multiple-media-queries/)
- [Complex conditional width using flex-basis with clamp](https://every-layout.dev/blog/sidebar-flex-basis-clamp/)
- [Using grid to split a table cell](https://www.peterkrautzberger.org/0213/)
- [TablesNG — Improvements to `<table>` rendering in Chromium](https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/)

CSS 애니메이션 및 효과

- [A CSS-only, animated, wrapping underline.](https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline/)
- [Cubic Bézier: from math to motion](https://blog.maximeheckel.com/posts/cubic-bezier-from-math-to-motion/)
- [Zero Trickery Custom Radios and Checkboxes - CSS-Tricks](https://css-tricks.com/zero-trickery-custom-radios-and-checkboxes/)
- [CSS One-Liners to Improve (Almost) Every Project](https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project)
- [6 CSS Snippets Every Front-End Developer Should Know In 2025](https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025)

텍스트 및 타이포그래피

- [Using CSS to Set Text Inside a Circle](https://css-tricks.com/using-css-to-set-text-inside-a-circle/)
- [The Trickery it Takes to Create eBook-Like Text Columns](https://css-tricks.com/the-trickery-it-takes-to-create-ebook-like-text-columns/)

스타일 가이드 및 접근성

- [Naming Variables In CSS](https://jwdallas.com/posts/namingcssvariables/)
- [Margin considered harmful](https://mxstbr.com/thoughts/margin/)
- [Defensive CSS - Ahmad Shadeed](https://ishadeed.com/article/defensive-css/)
- [The wasted potential of CSS attribute selectors](https://elisehe.in/2022/10/16/attribute-selectors)

CSS와 JavaScript의 조합

- [Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)
- [Replace JavaScript Dialogs With New HTML Dialog | CSS-Tricks](https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/)
- [How to prevent scrolling the page on iOS Safari 15](https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/)

CSS 아키텍처 및 모듈화

- [What is Modular CSS?](https://spaceninja.com/2018/09/17/what-is-modular-css/)
- [Panda CSS - The Origin Story](https://www.adebayosegun.com/blog/panda-css-the-origin-story)

`background`

- [CSS Background Patterns by MagicPattern](https://www.magicpattern.design/tools/css-backgrounds)