[CSS Battle - 6] 1-5. Acid Rain
·
✏️ Study/🖼️ HTML & CSS
타겟 이미지 제일 먼저 떠오르는 것은 z-index 가운데 낀 요소를 relative position으로 주고 양쪽 요소들을 옮겨볼 수도 있을까 했지만 생각이 나질 않음 내 코드 코드 양을 줄여보려고 클래스도 딱딱 맞아 떨어지는 것이 아니게 조금 지저분하게 했다 아웃풋 결과 Score: 601.04 {625}, 100% match 정리 margin 대신 flex layout으로 중앙을 잡은 것으로 byte 수가 조금 늘어난것 같지만.. 이게 더 정확한 방법이라 본다
[CSS Battle - 4] 1-3. Push Button
·
✏️ Study/🖼️ HTML & CSS
타겟 이미지 z-index를 써서 해결하면 되지 않을까..? 내 코드 아웃풋 결과 Score: 600.21 {792}, 100% match 정리 1등은 무려 108byte.. 반복 등장하는 속성을 단축하는 방법이 있는 듯하다. byte를 최대한 줄이기 위해 all 이라는 클래스를 만들어 position을 넣어봤다. z-index를 사용해서 element들을 겹쳐서 완성했다. z-index를 사용하기 위해서는 position 프로퍼티를 반드시 사용해야 한다는 점을 복습했다.