Box Shadows에서 Dashed Borders까지: CSSBattle의 Daily Target에서 63자를 달성한 방법 🎯
Source: Dev.to
위의 소스 링크에 포함된 전체 텍스트를 제공해 주시면, 해당 내용을 한국어로 번역해 드리겠습니다. (코드 블록, URL 및 마크다운 형식은 그대로 유지됩니다.)
63자에 이르는 여정
내 솔루션이 어떻게 발전했는지 차근차근 설명해 드릴게요 — 과정 자체가 흥미로운 부분이니까요.
시도 1 — 무차별 대입 (box‑shadow 시대)
*{
background:#FFF;
*{
border:70px solid#328FC1;
margin:70;
color:323138;
box-shadow:190px 110px,-190px 110px,190px -110px,-190px -110px
}
}나는 네 개의 사각형, 네 개의 box‑shadow 오프셋을 생각했어요. 시각적으로는 동작했지만 문자 수가 많이 나왔죠. 위치 트릭을 위한 box‑shadow는 CSSBattle에서 흔히 쓰이는 기법이지만, 여기서는 적절한 도구가 아니었습니다.
시도 2 — 점선 테두리로 전환
그때 깨달았습니다. 목표에 점선 테두리 패턴이 있었거든요. 그냥 dashed를 쓰면 어떨까?
*{
background:#FFF;
*{
border:70px dashed#328FC1;
margin:0;
}
}
&{
border:70px dashed#323138;
}바깥 요소는 한 색, 안쪽 요소는 다른 색을 갖게 됩니다. 줄도 줄고 로직도 깔끔해졌어요.
시도 3 — 두 규칙을 하나로 합치기
두 테두리가 같은 속성을 공유하고 색만 다르게 처리하면 어떨까?
*{
background:#FFF;
color:323138;
border:75q dashed;
*{
color:328FC1;
margin:0;
}
}점점 짧아지고 있습니다. border-color 대신 color를 사용하고, 70px 대신 75q를 썼어요 (q 단위는 ¼mm, 입력이 짧으면서도 비슷한 시각 효과를 낼 수 있습니다). 배경 흰색은 여전히 남아 있었죠.
시도 4 — “잠깐, 이게 정말 필요해?” 순간
*{
color:323138;
border:75q dashed;
*{
color:328FC1;
margin:0
}
}63자. 점수: 819.42.
background:#FFF는 완전히 불필요했습니다. 기본 배경이 이미 흰색이었거든요. 나는 내내 불필요한 무게를 짊어지고 있었어요.
“이 줄이 실제로 무언가를 하는가?” 라고 검토하고 질문하는 순간— 바로 그곳에 숨은 문자가 있었습니다.
실제로 배운 것
-
첫 번째로 떠올리는 기술이 가장 효율적인 경우는 드물다.
나는 내가 알고 있던 박스‑쉐도우부터 시작했다. 점선 테두리가 올바른 도구였으며, 호기심을 유지함으로써 그것을 발견했다. -
추가하는 모든 속성은 문자 수 비용이다. 모든 것을 의심하라.
background:#FFF는 안전하고 명시적인 것처럼 보였지만 필요하지 않았다. “이 줄이 자리를 차지할 가치가 있는가?” 라는 질문은 CSSBattle를 넘어선 규율이다. -
q단위가 존재하지만 심각하게 활용되지 않는다.
CSS에는 1/4밀리미터 단위가 있다. 나는 이 언어를 사랑한다. -
일일 연습은 조용히 누적된다.
나는 한 번에 이 문제를 해결하지 못했다. 여러 날에 걸친 시도와, 거의 이해하지 못한 상위 솔루션들, “아, 기발하구나” 하는 순간들이 서서히 쌓여 패턴 인식을 키웠다. -
작은 성취도 축하할 가치가 있다.
문자 수가 80에 도달했을 때 나는 기뻤다. 63으로 줄였을 때는 매우 기뻤다. 둘 다 세계 기록은 아니지만, 충분히 이룬 느낌이었다.
CSSBattle을 시도해볼까요?
CSS를 조금이라도 작성한다면 — 예. 다음과 같은 이점이 있습니다:
- 숨겨져 있지만 실제로 존재하는 CSS 속성을 배우게 합니다
- 속성이 무엇을 하는지뿐 아니라 왜 작동하는지 생각하게 합니다
- 일반 작업에서는 접하기 힘든 단위, 트릭, 축약형을 소개합니다
- 문자 수가 2줄어들 때 작은 도파민을 제공합니다
또한 상위 솔루션을 살펴보며 겸손함을 느끼게 됩니다. 괜찮습니다; 그것이 목적이죠. 1위 솔루션이 하는 일의 20 %만 이해해도 뭔가를 배울 수 있습니다.
최종 생각
나는 일일 목표에서 두 자릿수 문자 수를 기록하게 될 줄은 몰랐습니다. 오랫동안 나는 목표 이미지에 근접하는 것만으로도, 보드에 오르는 것만으로도, 100자를 깨는 것만으로도, 80자를 깨는 것만으로도, 63자를 깨는 것만으로도 만족했습니다.
리더보드에는 언제나 더 똑똑한 사람이 있습니다. 그들의 솔루션은 내일 또다시 나에게 무언가를 가르쳐 줄 것입니다.
하지만 오늘은 63자가 꽤 많은 것처럼 느껴졌습니다.
CSSBattle을 해본 적 있나요? 거기서 배운 가장 좋아하는 CSS 트릭은 무엇인가요? 댓글을 남겨 주세요 — 진심으로 알고 싶습니다.