Angular 앱- 5. 진행 상태 표시하기

Angular 앱- 5. 진행 상태 표시하기

 

Progress 컨테이너 만들기 : 진행상태를 만들기 위해서 progress 영역 밑에 3개의 div 영역을 생성한다. 

 

 

Progress 스타일링하기 . 

progress style css

 

 

Pseudo 코드 after 를 이용해서 progress::after 하나더 만든다. 이번 css 는 image 를 변

 

이부분은 퀴즈가 진행되면서 하나씩 마킹되는 부분이다.  지금 전체 모습은 다음과 같다. 문제 풀이의 진행을 한번 확인해 주시길 부탁드려요. 

 

 

여기에 opacity : 0 를 추가하면 현재 링은 사라진다. 

 

사실 화면에 존재하시만 화면에 표시되지 않게 한것이다. 문제에 따라서 상태를 다르게 설정해 보자. 현재 문제가 진행중이라면 on, 문제의 답이 제출된 경우는 answered 라고 지정한다. 

 

progress tag 에 on 을 추가하면, 

 

그럼 해당 이미지가 노란색으로 표시된다. 

 

progress tag 가 answered 라도 on 과 동일하게 표시된다. 

 

 

다음은 answered & correct 인 경우, 

html 코드

css 코드

그럼 정답을 맞춘경우, 숨겨저 있던 ring 이 표시되서 나온다. 

answered & correct

 

다음 포스팅에서 angular 로직을 적용하면 아래와 같은 화면을 만들수 있다. 

 

끝..