49일차

---

HTML, CSS, JS 활용 46강 circleProgress

---

CODEPEN
선생님 영상

핵심 기능

• 원형 프로그레스바 구현
• jQuery로 수치 증가 및 진행률 애니메이션 처리
• 퍼센트 숫자가 올라가며 동기화됨
• stroke-dashoffset으로 원의 진행 표현

구성 분석

html
<div class="circle-progress">
<svg>
<circle class="bg" />
<circle class="progress" />
</svg>
<div class="num">0%</div>
</div>

• svg 안에 배경용 circle.bg와 진행용 circle.progress가 있음.
• 중앙에는 수치 출력용 .num 텍스트 포함.

css
circle { stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 0.5s; }

• stroke-dasharray: 원의 총 둘레 길이(440)
• stroke-dashoffset: 현재 가려진 길이 → 값이 작아질수록 드러남
• transform: rotate(-90deg): 시작점을 위로 설정

js
let num = 0;
let percent = 80;

let interval = setInterval(() => { num++; $(".num").text(num + "%"); $(".progress").css("stroke-dashoffset", 440 - (440 * num) / 100);
if (num >= percent) { clearInterval(interval); } }, 20);

• num을 1씩 증가시키며 화면에 출력
• 동시에 stroke-dashoffset도 계산하여 점점 원이 차오르게 만듦
• 목표 퍼센트(percent)에 도달하면 정지

핵심 개념 요약

요소	설명
stroke-dasharray	원 둘레 전체 길이 지정
stroke-dashoffset	얼마나 가릴지 (→ 줄일수록 보임)
setInterval	애니메이션용 타이머
.text()	숫자 동기화 출력
440 * num / 100	현재 퍼센트에 따라 오프셋 계산

한줄 요약
stroke-dashoffset을 점점 줄이며 원형 프로그레스바를 채우고, 중앙에 퍼센트 숫자를 동기화함. setInterval로 1%씩 애니메이션 효과를 구현함.

---

HTML, CSS, JS 활용 47강 탭메뉴에 따라 화면이 전체적으로 바뀌는 효과

---

CODEPEN - 작업 1, 파트 스위치
CODEPEN - 작업 2, 사이즈 고정작업
CODEPEN - 작업 3, 배경이미지 배치, 프리로딩
CODEPEN - 작업 4, 배경이미지 흐르도록
CODEPEN - 작업 5, 내비버튼 꾸미기
CODEPEN - 작업 6, 내비버튼 작동

선생님 영상

---