CSS로 원형 만드는 법

 

 

보통은 브라우저에 div, container 등 사각형 형식으로 스타일을 주긴 하지만, 이따금씩 동그란 원이 필요할 때가 있다.

오늘 클론코딩을 강의를 들으며 그런 경우가 생겼고, 어? 그러고 보니 원은 어떻게 그리지? 하며 알게 된 내용을 정리해 본다. 

 

CSS로 원 그리기
Step1. width, height 값을 동일하게 준 이후
Step2. border-radius 값을 50% 로 설정한다. 

 

 

원을 그리는 방법은 매우 간단하다. 

아래 코드와 같이 width, height 값을 동일하게 준 이후 border-radius 를 이용한다.

보통 border-radius: 50% 를 적용하는데, 아래와 같이 적당한 픽셀 값(11px 이상 정도)을 넣어줘도 되는 듯 하다.

.nav-cart-count {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -35px;
    margin-left: -55px;
    border-radius: 11px;
    font-size: 14px;
    background: red;
    color: white;
}

 

 

<결과물>

 

이미지에 빨간 동그라미가 잘 생성되었다. nav-cart-count 로 장바구니 아이콘 옆에 담은 상품 개수를 잘 표시해 주었다.

앞으로도 이렇게 동그라미가 필요할 때 유용하게 써먹을 수 있겠다!!