[CSS Battle - 3] 1-2. Carrom

carrom이라는 단어가 궁금해서 찾아보니 아래와 같은 서양식 오목?같은 보드판을 말하는 것 같다

 

 

그래서 타겟 이미지도 비슷한 보드 모양이다

 

타겟 이미지

 

 

내 코드

<div>
  <div class="box up left"></div>
  <div class="box up right "></div>
</div>
<div>
  <div class="box down left"></div>
  <div class="box down right"></div>  
</div>
<style>
  body {
    margin: 0px;
    background: #62374e;
    font-size: 0
  }
  div {
    margin: 0px;
  }
  .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
  .up {
    margin-top: 50px;
  }
  .left {
    margin-left: 50px;
  }
  .down {
    margin-top: 100px;
  }
  .right {
    margin-left: 200px;
  }
</style>

 

아웃풋

 

 

결과

Score: 602.44 {535}, 100% match

정리

1등은 무려 68byte.. 어떻게 줄일 수 있을까??

일단은 byte보다 연습하는 느낌으로 하루에 한 개씩 편안하게 접근해야겠다.

 

inline-block을 활용해서 풀었고, body 에서 font-size: 0 을 주어 div간의 기본 margin을 제거했다

float를 써서 풀 수도 있을것 같은데 다음에 시도해봐야겠다