https://waylog.pages.dev/category/css Waylog Blog의 CSS 카테고리에 속한 글 모음 ko-KR Thu, 21 May 2026 13:50:29 GMT Mon, 23 Feb 2026 00:00:00 GMT Next.js https://waylog.pages.dev/posts/css-scope-anchor-positioning-2025 https://waylog.pages.dev/posts/css-scope-anchor-positioning-2025 Mon, 23 Feb 2026 00:00:00 GMT CSS CSS가 스스로 경계를 그을 수 있다면 2026년 프론트엔드 생태계에서 두 가지 CSS 기능이 조용하지만 확실하게 실무의 판도를 바꾸고 있습니다. @scope와 Anchor Positioning입니다. 두 기능은 서로 다른 문제를 풀지만, 공통적으로 "자바스크립트가 처리하던 일을 CSS가 직접 처리한다"는 흐름 위에 있습니다. @scope는 스타일 격리 문제를 해결합니다. Anchor Positioning은 팝오버, 툴팁, 드롭다운의 위치 계산 문제를 해결합니다. 두 기능 모두 2026년 기준 C https://waylog.pages.dev/posts/tailwind-v4-migration-css-engine-changes https://waylog.pages.dev/posts/tailwind-v4-migration-css-engine-changes Tue, 20 Jan 2026 00:00:00 GMT CSS PostCSS 기반 세계관이 무너지는 날 우리 팀이 Tailwind CSS v4 마이그레이션을 처음 마주한 건 2026년 초였습니다. Next.js App Router로 전환한 지 얼마 지나지 않아, Tailwind 팀이 v4 정식 릴리즈를 선언했습니다. 릴리즈 노트를 열자마자 첫 번째 느낌은 "업그레이드"가 아니라 "다른 도구"를 배우는 기분이었습니다. tailwind.config.js가 사라지고, @tailwind base; @tailwind components; @tailwind utilit https://waylog.pages.dev/posts/css-cascade-layers-design-system-specificity-management https://waylog.pages.dev/posts/css-cascade-layers-design-system-specificity-management Sun, 07 Dec 2025 00:00:00 GMT CSS !important가 무한 증식하는 순간, 뭔가 잘못된 것이다 디자인 시스템을 운영하다 보면 어느 순간 CSS 파일 전체에서 !important가 조용히 번식해 있는 광경을 목격하게 됩니다. 처음에는 단 한 줄이었습니다. "Tailwind 유틸리티 클래스가 컴포넌트 스타일을 덮어쓰지 못하네, 일단 !important 붙이자." 그 다음에는 라이브러리 팀이 "우리 .Button 스타일이 페이지 CSS에 묻히니까 !important 붙이겠습니다"라고 합니다. 결국 모든 팀이 같은 전략을 쓰고, CSS https://waylog.pages.dev/posts/4 https://waylog.pages.dev/posts/4 Sun, 09 Mar 2025 00:00:00 GMT CSS \n\nCSS 방법론의 역사는 깁니다. OOCSS, BEM, SMACSS, CSS-in-JS를 거쳐 이제는 Utility-First CSS의 시대가 도래했습니다. 그 선봉장에 있는 Tailwind CSS. 처음에는 "HTML 클래스가 너무 지저분해진다"며 거부감을 느끼던 개발자들도 한번 맛을 보면 다시는 일반 CSS로 돌아가지 못한다고 합니다. 이 글에서는 Tailwind CSS가 왜 생산성을 폭발적으로 높여주는지, 그리고 tailwind.config.ts를 통해 어떻게 우리만의 견고한 디자인 시 https://waylog.pages.dev/posts/62 https://waylog.pages.dev/posts/62 Thu, 26 Dec 2024 00:00:00 GMT CSS \n\nCSS 역사상 가장 오랫동안 개발자들이 염원해왔던 기능, 바로 "부모 선택자"입니다. JQuery의 .parent()나 .closest()를 쓰지 않고는 불가능했던 그 스타일링이, 드디어 순수 CSS만으로 가능해졌습니다. 주인공은 바로 :has() 의사 클래스(Pseudo-class)입니다. 2024년부터 모든 메이저 브라우저(Chrome, Safari, Firefox, Edge)에서 지원하기 시작한 이 혁명적인 선택자를 3,000자 가이드로 정리해드립니다. 1. :has()란 무엇인가? https://waylog.pages.dev/posts/css-container-queries-responsive-components https://waylog.pages.dev/posts/css-container-queries-responsive-components Sun, 04 Aug 2024 00:00:00 GMT CSS 반응형 기준은 viewport만이 아니다 오랫동안 반응형 웹은 viewport media query 중심으로 설계됐습니다. 화면 너비가 768px보다 작으면 모바일 레이아웃, 1024px보다 크면 데스크톱 레이아웃 같은 방식입니다. 하지만 현대 UI는 같은 컴포넌트가 사이드바, 카드 그리드, 모달, 대시보드 패널 안에서 서로 다른 크기로 렌더링됩니다. 화면은 넓어도 컴포넌트가 들어간 영역은 좁을 수 있습니다. Container Query는 이 문제를 해결합니다. 컴포넌트가 viewport가 아니라