📍타겟 이미지 📍문제 풀이 - 포크의 날카로운 부분은 7개의 div로 구현하여 홀수 번째 부분은 윗부분에 border-radius를 주고 짝수 번째 부분은 아랫부분에 border-radius를 준다 - 그런데 간단할 줄 알았는데 까다로운 부분이 생긴다 container 부분의 컬러에 따라, 이렇게 모서리를 깎아내도 적용되지 않는 문제가 생긴다 - 이를 해결하기 위해 홀수번째 날카로운 부분에만 div를 하나 더 생성해줘야 한다 (배경 layer 추가하여 배경색을 바꿔줘야 함) 📍코드 📍결과 100% match

타겟 이미지 flex 를 적용하고 flex-wrap: wrap 속성을 이용해서 width를 초과하는 element는 다음 행으로 내리자! 그리고 자식 태그는 3개만 만들기 내 코드 아웃풋 결과 Score: 600.69 {668 bytes}, 100% match 정리 flexbox가 정말 유용하다!

타겟 이미지 제일 먼저 떠오르는 것은 z-index 가운데 낀 요소를 relative position으로 주고 양쪽 요소들을 옮겨볼 수도 있을까 했지만 생각이 나질 않음 내 코드 코드 양을 줄여보려고 클래스도 딱딱 맞아 떨어지는 것이 아니게 조금 지저분하게 했다 아웃풋 결과 Score: 601.04 {625}, 100% match 정리 margin 대신 flex layout으로 중앙을 잡은 것으로 byte 수가 조금 늘어난것 같지만.. 이게 더 정확한 방법이라 본다

타겟 이미지 개별 요소를 골라 스타일 하기 vs grid 방식으로 6개 만들고 color on/off 하기? 방법이 떠올랐다. 내 코드 border-radius는 4가지를 사용할 경우 왼쪽 위 모서리부터 시계방향으로 적용됨 아웃풋 결과 Score: 602.26 {543}, 100% match 정리 다음에는 grid를 써서 6개의 아이템을 만들고 그 안에서 세분화해봐야겠다

타겟 이미지 z-index를 써서 해결하면 되지 않을까..? 내 코드 아웃풋 결과 Score: 600.21 {792}, 100% match 정리 1등은 무려 108byte.. 반복 등장하는 속성을 단축하는 방법이 있는 듯하다. byte를 최대한 줄이기 위해 all 이라는 클래스를 만들어 position을 넣어봤다. z-index를 사용해서 element들을 겹쳐서 완성했다. z-index를 사용하기 위해서는 position 프로퍼티를 반드시 사용해야 한다는 점을 복습했다.

carrom이라는 단어가 궁금해서 찾아보니 아래와 같은 서양식 오목?같은 보드판을 말하는 것 같다 그래서 타겟 이미지도 비슷한 보드 모양이다 타겟 이미지 내 코드 아웃풋 결과 Score: 602.44 {535}, 100% match 정리 1등은 무려 68byte.. 어떻게 줄일 수 있을까?? 일단은 byte보다 연습하는 느낌으로 하루에 한 개씩 편안하게 접근해야겠다. inline-block을 활용해서 풀었고, body 에서 font-size: 0 을 주어 div간의 기본 margin을 제거했다 float를 써서 풀 수도 있을것 같은데 다음에 시도해봐야겠다

타겟 이미지 내 코드 아웃풋 결과 Score: 689.58 {157}, 100% match 정리 기본적인 것만 써도 157 byte인데, 1등은 54byte이다.. 가독성을 일체 배제하고 작성하여야 하는 듯 하다 주석도 코드 길이에 포함되기 때문에, 주석을 지우고 제출해야한다 이번 문제는 user agent를 제거해 주는 것을 확인하는 문제인듯 하다

https://cssbattle.dev/ CSSBattle CSS Code Golfing Game is here! cssbattle.dev CSS Battle 이란? - HTML/CSS로 주어진 이미지를 구현 - 가능한 최소한의 코드로 작성 - 코드를 작성하고 제출하면 순위를 확인할 수 있다 - JS로 작성하거나, 코드에 이미지를 포함하면 안된다 무료 버전으로는 서비스의 모든것을 이용할 수 없다. 우선 하나씩 시작해서 CSS를 재밌게 숙달해보자 #1 pilot battle 부터 시작~