게임처럼 즐기는 CSS 스킬 배틀, CSS Battle

CSS 코딩 실력(Coding Skill)을 향상하는데 학습적인 방식보다 게임적인 요소가 가미되면 효과가 좋지 않을까 싶다.

CSS Battle

최근 CSS 코딩 스킬을 게임 방식을 통해 테스트해볼 수 있는 배틀 방식의 CSS Battle 등장해 개발자와 웹퍼블리셔들의 흥미를 유발하고 있다.

CSS Battle은 CSS 스킬을 사용하여 최소한의 코드(Code)로 주어진 대상 이미지를 복제하기 위해 HTML/CSS를 작성하는 것을 목표로 한다.

CSS Battle UI

대상 페이지에서 왼쪽의 편집기 영역에서 코딩을 시작하면 된다. 코드 입력을 시작하면 중간의 출력 영역이 코드 렌더링을 실시간으로 보여준다. 결과물이 우측 목표 이미지와 일치한다고 확신하면 제출 버튼을 눌러 점수를 확인하면 된다.

참고로 CSS Battle이기 때문에 코드에서 JavaScript 또는 이미지를 사용할 수 없다. 또한, 어떤 외부 에셋도 허용되지 않는다. 대상 이미지를 생성하는 데 필요한 모든 코드는 지정된 편집기에서만 작성해야 한다.

CSS 코딩에 자신있는 개발자나 웹퍼블리셔라면 한 번쯤 자신의 CSS 스킬을 CSS Battle 발휘해 보는 것도 아주 재밌는 과정일 것이다.