데브허브 | DEVHUB | CSSBattle VERSUS MODE: Who’s the Fastest Coder?CSSBattle VERSUS MODE: Who’s the Fastest Coder?
- CSSBattle Versus 모드는 1대1 대결로, 가장 먼저 100% 일치율을 달성하는 것이 목표이며, 속도가 최우선이다. ⚔️
- 참가자들은 복잡한 모양을 만들기 위해
box-shadow나 여러 개의 div를 사용하는 등 다양한 CSS 전략을 시도한다. 🎨
- 정확한 픽셀 단위의 조정(pixel pushing)이 필수적이며, 99%에서 100%로 가는 마지막 1%가 가장 어렵고 좌절감을 유발한다. 🎯
position: fixed나 position: absolute를 활용한 요소 배치가 일반적이지만, 미세한 위치 조정에 어려움을 겪는다. 📏
- 게임 내 'diff view'는 변경 사항을 정확히 파악하기 어렵게 만들어 참가자들의 혼란과 진행 방해의 주된 원인이 된다. 🤯
- 중앙 정렬(centering) 및 요소 겹치기(
z-index)와 같은 기본 CSS 작업도 100% 정확도를 요구할 때는 상당한 도전이 된다. ↔️
- 목표 도형의 너비와 높이가 소수점 단위로 설정되어 있어, 완벽한 100% 일치율 달성을 극도로 어렵게 만든다. 🔢
- 속도 경쟁에서 변수 사용과 같은 코딩 방식은 때때로 시간을 지연시키는 요인이 될 수 있다. ⏱️