순수 CSS를 사용한 반응형 육각형 그리드: float 기반 접근 방식
2025-03-20
이 글에서는 미디어 쿼리, JavaScript, 과도한 해킹 없이 완전히 반응형인 육각형 그리드를 만드는 방법을 보여줍니다. `clip-path`, `float`, `shape-outside`를 효과적으로 사용하고 CSS 변수로 크기와 간격을 제어하여 유연한 레이아웃을 구현합니다. 마름모꼴, 팔각형 등의 그리드 생성으로 확장되며, CSS Grid를 사용하여 가운데 정렬 및 오버플로우 제어를 통해 사용자 지정 가능한 모양의 반응형이고 적응력 있는 그리드 시스템을 만듭니다.