Angular 앱- 1.styling for main heading and Questions ( part 2 )

Angular app - styling for main heading and Questions ( part 2 ) 

 

이번 포스팅에서는 메인 헤더와 퀴즈 부분에 대해서 작성해 본다. 

 

메인 헤더 작성 

myQuiz 클래스에 h1 요소에 대해서 다음과 같이 설정한다. 

main header

이번에는 헤더 뒷부분에 있는 "SATURN" 을 강조하기 위한 css 를 작성해 보자. 

"SATURN"의 경우는 html 소스를 보면 h1 태그 밑에 span 으로 지정되어 있으므로, 이를 이용하면 이부분만 CSS를 별도로 지정할수 있다. 

이렇게 작성된 CSS 를 적용하면, 다음과 같이 변경된다. 

다음으로 퀴즈에 대한 질문과 예제에 대해서 알아보자. 퀴즈 질문과 보기에 대해서는 question 컨테이너를 이용하여 html을 작성하고 관리한다. 그리고 question 내에 실제 문제와 보기는 별도의 클래스로 분리해서 관리할수 있게 구성한다. 

Question and Answer 

Question 블럭에 대한 설정: 

그럼 이제 question 에 대한 css 를 작성한다. 가장 먼저 question 컨테이너에 대한 영역을 설정해준다. 

브라우저를 이용해서 조금전에 작성된 내용을 확인해 보자. 

퀴즈의 문제와 답에 대한 css 스타일: 

.txt 는 질문에 대한 설정이고 , .ans 는 보기에 대한 css 스타일이다. 이렇게 작성하고 브라우저로 확인해 보자. 

 

끝