css로 동그라미 만들기

동그라미를 만들기 위해 CSS를 사용하는 방법은 여러 가지가 있습니다. 여기에 간단한 방법을 소개해 드리겠습니다.

border-radius 속성 사용

border-radius 속성을 사용하여 원형으로 만들 수 있습니다.

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
}

---

가상 요소(::before 또는 ::after)를 활용

가상 요소를 활용하여 동그라미를 만들 수도 있습니다.

.circle {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  border-radius: 50%;
  position: relative;
}

.circle::before {
  content: '';
  display: block;
  padding-top: 100%;
}

위의 코드에서 .circle::before 부분이 가상 요소를 사용한 부분입니다. 이 방법은 가상 요소의 padding-top 값을 100%로 설정하여 가상 요소를 정사각형으로 만들고, 부모 요소에 대한 상대 위치 지정(position: relative;)으로 위치를 조정합니다.
이 중에서 적절한 방법을 선택하여 사용하시면 됩니다. 원하는 크기나 색상으로 수정하여 원하는 스타일의 동그라미를 만들 수 있습니다.

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받고 있습니다