# 모던 CSS 코드 스니펫: 더 이상 2015년처럼 CSS를 작성하지 말자 > Clean Markdown view of GeekNews topic #26731. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=26731](https://news.hada.io/topic?id=26731) - GeekNews Markdown: [https://news.hada.io/topic/26731.md](https://news.hada.io/topic/26731.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-02-16T15:33:05+09:00 - Updated: 2026-02-16T15:33:05+09:00 - Original source: [modern-css.com](https://modern-css.com) - Points: 3 - Comments: 1 ## Topic Body - 오래된 **CSS 해킹 기법**과 이를 대체하는 **최신 네이티브 CSS 문법**을 나란히 비교해 보여주는 코드 모음 - **Grid, Flexbox, OKLCH 색상, container query, scroll-timeline** 등 최신 표준을 활용해 자바스크립트 의존도를 줄임 - **색상, 레이아웃, 애니메이션, 셀렉터, 타이포그래피, 워크플로우** 등 주제별로 구분되어 각 기능의 현대적 대안을 제시 - 최신 CSS 표준을 통해 **JS, Sass, 외부 라이브러리 의존도를 줄이고**, **브라우저 네이티브 기능**을 최대한 활용할 수 있음 ## Comments ### Comment 51249 - Author: neo - Created: 2026-02-16T15:33:06+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47025851) - 2025년의 CSS라니, 마치 **2005년처럼 인라인 스타일**을 HTML에 직접 쓰자는 느낌임 Tailwind 얘기를 하는 거지만, 결국 포맷과 표현의 분리를 무시하는 셈임 - 웹 개발에서 가장 오래된 **신화**는 ‘관심사의 분리’라는 개념임 - HTML과 CSS는 기술의 분리일 뿐임 HTML이 진짜로 콘텐츠만 담당하고 CSS가 스타일만 담당했다면, `.container-wrapper .container .container-inner` 같은 **div soup**을 만들 필요도 없었을 것임 레이아웃을 바꿀 때마다 HTML을 수정해야 하는 현실이 그 증거임 - 코드를 난독화할 필요 없음, 그냥 Tailwind 쓰면 됨 - 오히려 그게 낫다고 생각함 컴포넌트 관련 코드가 한 곳에 모여 있어서 파일을 왔다 갔다 할 필요가 없음 - 좋은 아이디어라고 생각함 **레이아웃과 스타일은 분리할 수 없는 UI의 일부**임 HTML은 콘텐츠가 아니라 레이아웃임 설령 관심사 분리를 신봉하더라도 HTML과 CSS는 같은 표현 계층에 속함 둘을 분리할 수 있다고 믿는 건 현실을 외면하는 것과 같음 - 최근 CSS의 주요 개선점 목록을 정리해봤음 1) **중첩 셀렉터(nested selectors)** 2) `:has(...)` 3) `:is(...)` — 예전엔 `:not(:not(...))` 같은 꼼수를 써야 했음 4) `:where(...)` — `:is(...)`와 비슷하지만 **셀렉터 가중치가 0**이라 복잡한 셀렉터를 쓸 때 유용함 - #1에 강력히 동의함 대부분의 LLM이 이 기능을 모름 `AGENTS.md`에 예시를 추가하길 추천함 [MDN Nesting Selector 문서](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector)를 참고하면 좋음 `&` 셀렉터를 활용해 **가독성과 중복 제거**를 동시에 얻을 수 있음 - 내가 제일 좋아하는 건 `text-box: trim`임 20년 동안 디자이너에게 대문자 상단 맞추기 불가능하다고 설명하던 시절이 끝나서 자유로움을 느낌 - 개인적으로는 `@layer` 기능이 가장 마음에 듦 - 2~4번은 좋지만 **중첩 셀렉터는 grep 불가능**해서 싫음 - 예시 중 일부는 예전 방식이 모든 브라우저에서 작동하지만, 새 방식은 Chrome/Edge에서만 됨 이런 예시를 넣는 건 **Blink 독점**을 강화하므로 무책임하다고 생각함 - 동의함. 기본 필터가 “newly available”로 설정되어 세 주요 브라우저(Chrome/Edge, Safari, Firefox)를 모두 포함하면 좋겠음 - 사이트 탓은 아님 오히려 **Mozilla의 표준 준수 부족**을 지적해야 함 - 화면 가장자리에 요소를 고정시키는 걸 멈춰야 함 일부 사이트는 **화면의 절반 이상을 정적 요소**가 차지함 콘텐츠는 스크롤되게 두는 게 자연스러움 - 아이러니하게도 해당 사이트는 **다크 모드 고정**이고, `prefers-color-scheme`을 사용하지 않음 - “창의적인 CSS 예시 좋다!” 하고 보면, 브라우저 지원이 40~50% 수준이라 현실적 제약이 있음 - 과거엔 이런 지원 부족이 큰 문제였지만, 지금은 많이 나아졌음 Chromium의 과도한 영향 덕분이긴 하지만 결과적으로는 긍정적임 [Interop 2025](https://wpt.fyi/interop-2025) 참고 - 예시 필터를 “widely available”로 바꾸면 지원률이 훨씬 높아짐 - 시간이 걸릴 뿐임 브라우저 벤더들이 언젠가 **광범위한 지원**을 위해 미리 기능을 추가하고 있음 - Firefox에서는 안 된다고 표시된 예시들이 실제 데모에서는 잘 작동해서 혼란스러움 혹시 **polyfill**이 적용된 건지 궁금함 - “Limited availability” 표시임 왼쪽 하단의 초록색 퍼센트는 해당 기능을 지원하는 브라우저 사용자 비율을 의미함 절반 이하인 경우도 많음 결국 “modern CSS”라기보다 “**latest Chrome CSS**”에 가까움 - 기능 지원 라벨링이 엉망임 예를 들어 `sibling-index()`는 Firefox에서 아직 안 되는데 “widely available”로 표시되어 있음 - 요즘은 Tailwind, CSS-in-JS, Sass/SCSS, Vanilla CSS 중 어떤 걸 써야 하는지 헷갈림 - 정답은 없음 팀에 맞는 걸 쓰면 됨 Tailwind가 맞으면 그걸로, 개인 프로젝트면 인라인 CSS로, Sass가 익숙하면 그대로, 최신 CSS에 올인하고 싶으면 **그것도 멋진 선택**임 - 웹 개발을 너무 오래 하다 보니, “옛날 방식”이라 불리는 예시들조차 **처음 보는 기능**이 많음 - 색상 밝기 조절 기능은 처음 봤음 예전엔 Sass와 Compass로 구현했는데, **툴체인 유지보수**가 번거로웠음 이제 CSS 자체에서 지원하니 훨씬 편리해짐