IT Dev Log

Angular 앱- 6. Angular 앱과 컨트롤러 설치 angular 사용을 위해서 자바스크립트 파일 / 컨트롤러는 준비한다. 자바스크립트 관련 파일들은 body 태그의 마지막에 위치한다. 이유는 html 에 있는 모든 내용을 먼저 화면에 보여주고 자바스크립트 파일을 로딩한다. 그렇지 않으면 자바스크립트 파일 로딩으로 보여지는 화면에 지연이 생길수 있기 때문이다. angular 와 quiz 용 자바스크립트 파일을 js 폴더 아래에 복사하고 만들어준다. quiz.js 파일 : angular 에서 html 코드를 제어하기 위해서 모듈을 호출해야 하는데, 'myQuiz' 라는 app 을 index.html 에서 찾아서 angular app 으로 선언한다. 이를 위해서 html 코드에서도 app 을 선언해주..

Angular 앱- 5. 진행 상태 표시하기 Progress 컨테이너 만들기 : 진행상태를 만들기 위해서 progress 영역 밑에 3개의 div 영역을 생성한다. Progress 스타일링하기 . Pseudo 코드 after 를 이용해서 progress::after 하나더 만든다. 이번 css 는 image 를 변 이부분은 퀴즈가 진행되면서 하나씩 마킹되는 부분이다. 지금 전체 모습은 다음과 같다. 문제 풀이의 진행을 한번 확인해 주시길 부탁드려요. 여기에 opacity : 0 를 추가하면 현재 링은 사라진다. 사실 화면에 존재하시만 화면에 표시되지 않게 한것이다. 문제에 따라서 상태를 다르게 설정해 보자. 현재 문제가 진행중이라면 on, 문제의 답이 제출된 경우는 answered 라고 지정한다. pro..

Angular 앱- 4.styling for feedback container 각 문제에 대한 피드백에 대한 내용을 추가한다. 피드백에 대한 내용과 버튼이 추가된 것을 확인할수 있다. 피드백에 대한 CSS 스타일을 작성한다. 피스백 스타일이 적용된 내용을 확인한다. 여기서 피드백을 숨기기 위해서 다음 스타일을 추가한다. 그럼 피드백이 히든으로 되서 화면에서 보이지 않게 된다. 여기서 사용자가 질문에 대한 답을 하게되면 feedback 이 다시 visible 상태로 변경되기 때문에 화면에 보여지게된다. 여기서 상태가 unanswered -> answered 로 변경되면 피드백이 자동으로 변경된다. 다시 화면에 나타난다. 이제 새로운 작업을 위해서 기존의 모든 작업을 옆으로 이동하고 새로운 작업을 준비한다...