It Shouldn’t Be This Hard… But It Was (CSS Battle)
- CSS Battle은 제한 시간 내에 최소한의 문자로 이미지를 정확히 재현하는 도전 과제입니다. ⏱️
- CSS로 삼각형 모양을 만드는 것은
clip-path: polygon을 사용하더라도 좌표 설정과 구문 이해에 어려움이 있어 외부 자료를 찾아봐야 했습니다. 📐
- 문자 수를 줄이기 위해
flexbox 대신 fixed positioning을 선택하는 등 CSS Battle 특유의 최적화 전략을 사용했습니다. 📍
- 대각선 줄무늬 패턴을 만들기 위해
repeating-linear-gradient가 핵심 속성으로 사용되었으나, 각도, 크기, 위치 조정에 큰 어려움을 겪었습니다. 🌈
- 색상 변수 사용이 직접 입력하는 것보다 문자 수가 더 많을 수 있다는 점을 고려하는 등, 문자 수 최적화에 대한 깊은 고민을 보여주었습니다. 🔢
- 전체 과정은 수많은 시행착오, 숫자(각도, 너비, 높이, 위치)의 끊임없는 조정, 그리고 잦은 검색으로 점철되어 정교한 CSS 재현의 복잡성을 드러냈습니다. 🧪
- 결국 "CSS polygon clip path maker"와 같은 외부 도구에 의존하게 되었는데, 이는 복잡한 CSS 작업에서 이러한 도구의 실용적인 필요성을 보여줍니다. 🛠️
- 99.9%의 높은 정확도를 달성했음에도 불구하고, 화자는 과정이 "끔찍하고" "너무 어려웠다"고 표현하며, 높은 점수가 항상 쉬운 해결책을 의미하지는 않음을 강조했습니다. 😅
- 다른 참가자들도
repeating-linear-gradient와 clip-path를 사용한 것으로 보아, 이러한 기법들이 해당 유형의 챌린지에서 일반적인 접근 방식임을 알 수 있습니다. 🤝