CSS Battle · 10 Stages
🎨 CSS Battle
HTML과 CSS 만으로 목표 이미지를 재현하세요.
픽셀 일치율 100% + 최소 글자 수가 최고 점수.
적게 쓸수록 강합니다. 로그인하면 기록이 저장돼요.
총 스테이지
10
내 완성
—
로그인 필요
내 총 글자
—
적을수록 좋음
도전자
0
명
STAGES
카드를 눌러 스테이지를 여세요. 목표 미리보기는 실시간으로 렌더링됩니다.
STAGE 01★☆☆
빨간 사각형
흰 배경 가운데에 200×200 빨간 정사각형을 그려보세요.
내 기록—
도전 →
STAGE 02★☆☆
파란 원
흰 배경 가운데에 파란 원(지름 200)을 그려보세요.
내 기록—
도전 →
STAGE 03★☆☆
노란 삼각형
위를 향한 노란 정삼각형을 가운데에. border 트릭을 사용해 보세요.
내 기록—
도전 →
STAGE 04★☆☆
반반
좌측은 파랑, 우측은 빨강으로 캔버스를 반으로 나누세요.
내 기록—
도전 →
STAGE 05★★☆
체크무늬
4분할 체크무늬(좌상·우하 흰색, 우상·좌하 검정).
내 기록—
도전 →
STAGE 06★★☆
타깃
동심원(빨·흰·빨·흰) 과녁. 바깥부터 빨강, 흰색, 빨강, 흰색.
내 기록—
도전 →
STAGE 07★★☆
계단
좌하단부터 올라가는 4단 계단(검정 사각형 4개).
내 기록—
도전 →
STAGE 08★★★
펭귄
검정 타원 몸통 + 흰 배 + 둥근 머리 + 눈 두 개. 주황 부리와 발 선택.
내 기록—
도전 →
STAGE 09★★★
한국 국기 (단순화)
흰 배경 + 중앙 태극(빨강 위/파랑 아래) + 네 귀퉁이 검정 사각형 4개.
내 기록—
도전 →
STAGE 10★★★
영삼넷 로고
파란 사각형 + 진한 파란 사각형 두 개를 좌우로. 사이트 로고 느낌.
내 기록—
도전 →
🏆 CSS Battle 명예의 전당
아직 기록이 없습니다. 첫 번째 도전자가 되어보세요!