Circular Progress ::before

Coddy의 원형 프로그레스 바 | 프론트엔드 프로젝트 코스 레슨 — 11개 중 8번째.

이제 다음을 위한 CSS를 작성해야 합니다:

.circular-progress::before{
    /*아래에 작성하세요*/

}

막히는 부분이 있다면 힌트를 확인해 보세요.

챌린지

쉬움

content를 “”로 설정합니다.
position을 absolute로 설정합니다.
height와 width를 190 픽셀로 설정합니다.
border radius를 50%로 설정합니다.
background color를 circular-progress. 클래스와 유사하게 설정합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

원형 프로그레스 바 | 프론트엔드 프로젝트의 모든 레슨

1소개

4JavaScript

2HTML

3CSS

Circular Progress 클래스

Circular Progress ::before 프로젝트 레슨

Progress Value 클래스

Text 클래스