CSS

프로젝트에 Tailwind CSS를 도입한 지 한 달이 지났다. utility-first 접근 방식에 대한 초기 거부감과 실제 사용 후 느낀 생산성 변화를 정리했다.

관리자 대시보드를 리뉴얼하면서 Flexbox 대신 CSS Grid를 선택했다. 반응형 레이아웃 구현이 훨씬 간결해졌고, 미디어 쿼리도 줄일 수 있었다.

float와 flexbox로 구현된 복잡한 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 요구사항 때문에 autoprefixer와 fallback 전략을 함께 적용했다.

프로젝트에서 미디어 쿼리 없이 반응형 카드 레이아웃을 구현할 필요가 있었다. CSS Grid의 auto-fit과 minmax를 활용해 깔끔하게 해결했다.

반응형 대시보드 레이아웃 구현 중 CSS Grid와 Flexbox를 함께 사용하면서 발생한 아이템 크기 계산 오류를 해결했다. min-width: 0 속성이 핵심이었다.

기존 float와 flexbox 조합으로 구현된 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만, autoprefixer와 fallback 전략으로 해결했다.

프로젝트 리뉴얼 작업 중 CSS Grid와 Flexbox를 함께 사용하면서 겪은 브라우저 호환성 문제와 해결 방법을 정리했다. IE11 지원 요구사항이 있어 fallback 전략이 필요했다.

관리자 대시보드 리뉴얼 작업 중 CSS Grid와 Flexbox를 적절히 혼용해 반응형 레이아웃을 구현했다. 각각의 특성을 이해하고 적재적소에 활용하는 것이 중요했다.

반응형 대시보드를 만들면서 CSS Grid와 Flexbox를 조합해 사용했다. 각각의 특성을 이해하고 적재적소에 배치하니 미디어쿼리 없이도 유연한 레이아웃을 구성할 수 있었다.

레거시 float 레이아웃을 CSS Grid로 전환하는 작업을 진행했다. IE11 지원 요구사항 때문에 예상보다 복잡한 작업이 되었고, 몇 가지 해결책을 찾아냈다.