CSS

float와 position으로 구현된 대시보드 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만 autoprefixer로 해결했다.

프로젝트의 메인 레이아웃을 Flexbox에서 CSS Grid로 전환했다. IE11 지원 때문에 고민했지만, autoprefixer와 fallback 전략으로 해결했다.

레거시 float 레이아웃을 Grid와 Flexbox로 전환하는 작업을 진행했다. 각각의 특징을 이해하고 적절히 조합하니 코드가 훨씬 간결해졌다.

IE11에서 flex container의 min-height가 자식 요소에 제대로 적용되지 않는 버그를 발견했다. flex-basis를 사용한 우회 방법으로 해결했다.

Flexbox만으로는 한계가 있던 2차원 레이아웃을 CSS Grid로 해결했다. IE11 지원이 필요한 프로젝트였지만, autoprefixer와 @supports를 활용해 점진적 향상을 적용했다.

IE11에서 Flexbox를 사용하다 마주친 min-height 버그를 정리했다. 프로덕션 배포 전에 발견해서 다행이었다.

프로젝트의 float 기반 레이아웃을 CSS Grid로 전환했다. IE11 지원 때문에 고민이 있었지만, autoprefixer로 어느 정도 해결할 수 있었다.

IE11 지원 때문에 미뤄두었던 CSS Grid를 드디어 프로젝트에 적용했다. Flexbox 대비 레이아웃 코드가 얼마나 간결해지는지 확인할 수 있었다.

Flexbox만으로 복잡한 2차원 레이아웃을 구현하는 데 한계를 느꼈다. CSS Grid Layout을 도입해 대시보드 화면을 리팩토링한 과정을 정리했다.

float과 position으로 구현했던 복잡한 레이아웃을 Flexbox로 전환했다. IE11 지원을 유지하면서도 코드량을 절반 이상 줄일 수 있었다.