🎨 프론트엔드 공부/HTML & CSS

타겟 이미지 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 부터 시작~