HTML과 CSS를 사용하여 서클을 어떻게 만들 수 있나요?

HTML 페이지에 원 그리기

HTML5 및 CSS3를 사용하여 원형 요소를 만드는 것은 직접적으로 불가능합니다. 그러나 시각적으로 원과 유사한 요소를 만드는 기술을 사용할 수 있습니다.

둥근 직사각형 만들기

원을 시뮬레이션하는 핵심은 직사각형을 만드는 것입니다. 둥근 모서리가 있습니다. CSS의 border-radius 속성을 사용하면 모서리의 곡률을 정의할 수 있습니다.

반경 결정

완벽한 원을 얻으려면 border-radius 값이 필요합니다. 직사각형 너비 또는 높이의 절반과 같습니다. 이렇게 하면 모서리가 원의 느낌을 만들기에 충분할 정도로 안쪽으로 구부러집니다.

예제 코드

원형 요소를 생성하는 다음 코드 조각을 고려하세요.

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

이 예에서는 너비와 높이가 50인 직사각형을 만듭니다. 픽셀. border-radius 값은 25픽셀로 설정됩니다. 이는 직사각형 너비/높이의 절반입니다. 이렇게 하면 빨간색으로 채워진 원 모양이 생성됩니다.