Angular 앱- 2.styling for Answer status

Angular 앱- 2.styling for Answer status

 

이번 포스팅은 질문에 대한 답의 상태 표시를 작성해 보자. 

 

답의 상태 종류 : selected, correct, selected::after, correct:: after

 

다음은 pseudo 코드를 적용해서 화면을 reload 시에 특정 스타일이 적용된다. psuedo 코드를 적용하면 특정 시점에 원하는 코드를 추가로 insect 시킬수 있다. 

.ans::after 스타일

background 의 경우는 공간을 확인하기 위한 목적이라.. 일단 위치가 맞는지 보고 괜찮다면 색상을 제거한다. 

psuedo after 기능을 이용해서 selected -> incorrect 이미지 호출, correct -> correct 이미지 호출

 

만일, 사용자가 selected & correct 라면 화면에는 다음과 같이 보여진다.

 

스타일의 경우는 나중에 적용한 것이 화면에 보여기기 때문에 selected & correct 하면 정답 표시만 남겨진다. 

 

 

끝.