인프런 커뮤니티 질문&답변
작성한 질문수
프로그레스바 로직 질문있어요....
작성
·
284
2
ㅠ.ㅠ 저만 이해못하는지 질문이없네요..
엔드포인트로 나누어서 인덱스+1 곱하시는 로직이
어떤 원리인지 궁금함미다...
답변 2
1
.status div 태그의 색은 흰색으로 지정하고,
.statusBar div 태그의 색은 다른색으로 지정한 다음,
.statusBar div 태그의 width값을 바꾸어가며 진행창을 구현하고자 합니다.
(100 / 모든 질문의 개수) 를 한다면, 질문 한개당 몇 %의 width값이 할당되어야 하는지 알 수 있습니다.
사용자가 첫 번째 질문에 대한 응답을 할 차례라면,
width 값은 ( 100 / 모든 질문의 개수 ) * 1 이 되어야 할 것입니다.
두 번째 질문에 대한 응답을 할 차례라면,
width 값은 ( 100 / 모든 질문의 개수 ) * 2 가 되어야 할 것입니다.
저희의 qIdx 값은 0부터 시작하기에 +1을 해주어 계산한 것입니다.
혹시 이해가 안되신다면, 모든 질문의 개수가 10개라고 가정하여 직접 계산해보시면 될 것 같습니다.
혹시 도움이 되셨을까요?
0
qIdx = 0:(100 / endPoint) * (qIdx + 1)(100 / 12) * (0 + 1)(100 / 12) * 1약 8.33%
qIdx = 1:(100 / endPoint) * (qIdx + 1)(100 / 12) * (1 + 1)(100 / 12) * 2약 16.67%
qIdx = 2:(100 / endPoint) * (qIdx + 1)(100 / 12) * (2 + 1)(100 / 12) * 3약 25%
qIdx = 3:(100 / endPoint) * (qIdx + 1)(100 / 12) * (3 + 1)(100 / 12) * 4약 33.33%
qIdx = 4:(100 / endPoint) * (qIdx + 1)(100 / 12) * (4 + 1)(100 / 12) * 5약 41.67%
qIdx = 5:(100 / endPoint) * (qIdx + 1)(100 / 12) * (5 + 1)(100 / 12) * 6약 50%
qIdx = 6:(100 / endPoint) * (qIdx + 1)(100 / 12) * (6 + 1)(100 / 12) * 7약 58.33%
qIdx = 7:(100 / endPoint) * (qIdx + 1)(100 / 12) * (7 + 1)(100 / 12) * 8약 66.67%
qIdx = 8:(100 / endPoint) * (qIdx + 1)(100 / 12) * (8 + 1)(100 / 12) * 9약 75%
qIdx = 9:(100 / endPoint) * (qIdx + 1)(100 / 12) * (9 + 1)(100 / 12) * 10약 83.33%
qIdx = 10:(100 / endPoint) * (qIdx + 1)(100 / 12) * (10 + 1)(100 / 12) * 11약 91.67%
qIdx = 11:(100 / endPoint) * (qIdx + 1)(100 / 12) * (11 + 1)(100 / 12) * 12정확히 100%
허으............... 친절한설명 감사합니다 ㅠㅠ
수알못인 저를 이해시켜주셔서 감사해요..
앞으로 프로그레스바는 저도 할수 있을것 같습니다 덕분에..
앞으로도 많은 강의 부탁드려요 진짜 너무최고에요..
꼭꼭 수강할게요 감사해요^^