CSS - 단 한 개의 div 태그로 여러개의 동그라미 만들기

여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다.

 

그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요소로 말입니다. ::before와 ::after가 있으니 본체인 자신을 포함해 최대 3개까지는 가능합니다. 하지만 4개 이상은 이 방법으로는 어림없습니다. 허나 이제부터 알려드리는 방법으로 여러분들은 무한한 동그라미를 단 1개의 div 태그로 완성시킬 수 있습니다.

 

미리보기

그렇습니다. 가장 키 포인트는 그림자를 표현하는 box-shadow를 응용하는 것입니다. 일단 완성된 예시부터 만나보시겠습니다.

 

See the Pen Just 1 div, Many Circle! by rgy0409 (@rgy0409) on CodePen.

 

어떻습니까? 일단 급한대로 5개의 동그라미를 완성시켰습니다. CSS를 살펴보시기 바랍니다. 뭔가 핵심이 보이십니까? 그렇습니다. box-shadow 속성으로 얼마든지 원형 동그라미를 만들 수 있는 것입니다.

 

원리 이해

어떻게 이런 식으로 구현이 되는지 좀 더 자세히 알아보겠습니다.

 

width: 30px;
height: 30px;
margin: 10px;
border-radius: 50%;
background-color: #f54;

이건 첫번째 원이 됩니다. 가로 및 세로의 크기가 30px로 고정된 정사각형이죠. 거기에 border-radius를 50%로 적용시켰으니 완벽한 원형으로 변하게 됩니다. 그리고 백그라운드 색상이 f54로 적용되어 있죠. 거의 빨간색에 가까운 색상입니다. 이렇게 첫번째 원은 만들어 집니다. 가장 중요한건 다음 원형이지요.

 

box-shadow: 40px 0 0 0 #e6c76b, 80px 0 0 0 #5fcf65, 120px 0 0 0 #7ecae6, 160px 0 0 0 #6966ba;

핵심은 box-shadow의 속성에 있습니다. 해당 내용은 과거 글에 이미 한 차례 자세히 설명을 했으니 참고해 주시기 바랍니다.

 

CSS text-shadow box-shadow 요소 그림자 효과 사용법

CSS text-shadow box-shadow 요소 그림자 효과 사용법

box-shadow에는 기본적으로 네 개의 값을 사용하고 있습니다. 첫번째는 X좌표, 두번째는 Y좌표, 세번째는 퍼짐의 정도 (Blur 값), 마지막 네번째는 영역의 확장 정도입니다. 크기는 width와 height를 기본적으로 따릅니다. 첫번째 값을 유심시 보시면 40씩 증가되고 있음을 알 수 있습니다. 이것은 오른쪽 가로로 40px 만큼 반복적으로 떨어뜨리는 효과를 줍니다. 그리고 마지막에는 16진수 색상값만 입력하면 완성입니다. 생각보다 간단하죠? 따라서 쉼표로 구분해가며 여러개의 그룹을 늘려가면 동그라미도 무한정 늘릴 수 있는 것입니다. 끝.