:empty로 비어 있는 wrapper 다루기2026.06.10:empty로 비어 있는 wrapper 다루기CSS#tailwindcss#frontend#styling2026.06.10:empty로 비어 있는 wrapper 다루기CSS#tailwindcss#frontend#stylingUI를 만들다 보면 내용은 없는데 wrapper만 남는 경우가 있다. 카드의 보조 설명 영역, 필터 결과 안내 영역, 혹은 children을 받아서 그리는 작은 레이아웃 컴포넌트가 그렇다. 실제로 보여줄 내용은 없는데 padding이나 border가 적용된 부모 요소만 화면에 남으면,…
@function2025.11.02@functionCSS#design-system#functional#frontend+1 more categories or tags2025.11.02@functionCSS#design-system#functional#frontend+1 more categories or tagsCSS는 오랫동안 정적인 선언 언어처럼 다뤄졌다. 물론 calc()도 있고, 커스텀 속성도 있고, 미디어 쿼리나 컨테이너 쿼리도 있으니 실제로 그렇게 단순한 언어는 아니다. 그래도 반복되는 계산이나 디자인 시스템의 규칙을 재사용하려고 하면 금방 한계가 보인다. 값은 변수로 빼둘 수 있지…
@property와 동적 스타일링2025.05.13@property와 동적 스타일링CSSReact#design-system#dynamic+3 more categories or tags2025.05.13@property와 동적 스타일링CSSReact#design-system#dynamic+3 more categories or tags프론트엔드 개발자들이 모인 자리에서 “어떤 스타일링 도구 좋아하세요?”라고 물어보면 못해도 30분은 이야기할 수 있다. 내 경우에는 여러 번 말했듯이 Tailwind CSS와 CSS Module을 선호한다. 그런데 이 취향을 말하면 거의 정해진 질문이 돌아온다. “그거 동적 스타일링하기…