CSS를 사용하여 중간에서 DIV 확장

이 중간 CSS 문제에서 확장에서 우리의 목표는 DIV 요소를 중앙에서 바깥쪽으로 변환하여 다음을 달성하는 것입니다. 왼쪽 상단 모서리의 일반적인 확장과는 다른 효과입니다. CSS 전환을 활용하여 확장의 너비, 높이, 위치를 제어하여 중앙에서 성장하는 느낌을 주려고 합니다.

확장의 핵심

비결은 여백 속성 조작에 있습니다. 정확한 공식을 통해 여백을 전환하여 DIV 중심 주위에서 원하는 확장 정도를 지정할 수 있습니다.

확장 옵션

중간 확장 효과를 달성하기 위해 다음과 같은 몇 가지 옵션이 제공됩니다.

옵션 1: 예약된 공간 내 확장

이 기술은 주변 요소를 유지하면서 예약된 공간 내에서 DIV를 확장합니다. 그대로.

옵션 2: 주변 요소에 대한 확장

이 옵션에서는 DIV가 주변 요소 위로 확장되어 그에 따라 이동합니다.

옵션 3: 확장 및 요소 이동

이 방법은 확장과 요소 이동을 결합하여 다음을 허용합니다. DIV는 요소 전체를 확장할 뿐만 아니라 흐름에서 요소 뒤의 요소도 이동합니다.

추가 시나리오

• 비정사각형 확장: 이 기술은 정사각형이 아닌 DIV에도 적용되므로 다양한 모양이 가능합니다.
• 반응형 확장: 공식을 약간 수정하면 반응형 확장을 달성하여 다양한 화면 크기를 원활하게 수용할 수도 있습니다.