CSS 로 동그라미 만드는 법

화면에서 특정 영역을 표현할때 원 모양으로 표현하고 싶을 때가 있다.

그럴 때에는 간단하게 CSS 의

border-radius 옵션을 이용하면 된다.

이 수치에 따라 모서리 부분의 곡선이 표현 되는 데 

원의 경우에는 가로 세로 가 같다면 50% 로 지정하면 해결된다.

코드는 아래와 같다.

<div class="circle-test">
</div>

<style>
.circle-test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: green;
}
</style>