CSS Battles! Recreate an ALIEN EYE with CSS
- CSS Battle에서 CSS와 HTML 코드를 최소화하여 외계인 눈을 만드는 것이 목표입니다. 👽
- radial gradient를 사용하여 배경 이미지를 만들고, 투명도를 표현하기 위해 짧은 hex 코드를 활용합니다. 🎨
- HTML 태그를 사용하여 요소를 수직으로 중앙 정렬하고, body의 높이를 조정하는 대신 태그를 직접 스타일링합니다. 📐
- box-shadow를 활용하여 원의 위치를 조정하고, 배경 위치를 변경하여 세부적인 위치 조정을 수행합니다. 🧮
- 코드 최적화를 위해 불필요한 세미콜론이나 공백을 제거하고, CSS 변수 사용을 고려하지만 문자 수 증가를 피합니다. 🧹
- radial gradient를 활용한 접근 방식이 효과적이었으며, 배경 위치 조정을 통해 세밀한 디자인을 구현합니다. ✨
- box-shadow 속성이 특정 조건에서 원형을 유지하지 못하는 문제점을 발견하고, 추가적인 요소 사용의 필요성을 확인합니다. 🤔
- HTML 요소를 중첩하여 position absolute 속성을 활용하려 했으나, 코드 길이 증가로 인해 기존 방식을 유지합니다. 📦
- 마지막 순간까지 미세한 조정을 통해 코드 크기를 줄이려고 노력하며, 최종적으로 100% 일치하는 결과물을 얻습니다. 🎯
- HTML 태그 자체를 스타일링하여 body의 기본 높이 설정 문제를 해결하고, radial gradient와 background position을 조합하여 복잡한 디자인을 구현합니다. 💡