잠시만 기다려 주세요.
P 태그를 주 요소로, ::before 및 ::after 가상 요소를 원형 디자인에 활용하려 했습니다. 💡::before 및 ::after 가상 요소는 content 속성이 없으면 렌더링되지 않는다는 중요한 점을 발견했습니다. ⚠️B 태그와 A 태그와 같은 단일 문자 HTML 요소를 사용하여 원형 디자인을 구현하는 것이 더 효율적이라고 판단했습니다. 🏷️body에 display: flex, justify-content: center, align-items: center를 적용하여 모든 콘텐츠를 페이지 중앙에 배치했습니다. ↔️flex-shrink 문제로 인해 원형 요소가 타원형으로 보이는 것을 방지하기 위해 명시적인 width를 설정했습니다. ⭕position: absolute와 left: 50%, transform: translateX(-50%) (이후 간소화)를 사용하여 원형 요소들을 정확한 위치에 배치, 100% 일치하는 디자인을 완성했습니다. ✅height 속성 대신 border 속성을 사용하여 요소의 크기를 정의하는 창의적인 방법을 통해 코드 길이를 줄였습니다. 🧱outline은 레이아웃에 영향을 주지 않으므로 요소의 공간을 차지해야 하는 경우에는 border가 더 적합하다는 것을 확인했습니다. 🖼️position: absolute 없이 중앙 정렬만으로도 구현 가능할지 추가적인 코드 최소화 방안을 모색했습니다. ⚙️Recommanded Videos
2024. 11. 11.
2025. 2. 28.
2024. 8. 18.
2025. 5. 22.
2024. 6. 24.
2025. 7. 15.