안녕하세요 느종입니다.
오늘은 저번 시간에 말한대로 스톱워치를 만들어볼까 합니다. 그냥 초만 재면 재미 없으니깐 일정 목표를 정하고, 그 목표 시간에 정확히 맞출 수 있는 콘텐츠를 만들 생각입니다. 그리고 매번 시작 화면, 메인 화면, 결과 화면 이렇게 구성하다보니 지루한 감이 없이 않아 있어서 이번에는 결과 내용을 팝업(모달)창으로 보여주는 방식으로 만들어볼까 합니다. 그럼 바로 시작하겠습니다. 함께 공부해요!
설계
시작 화면이랑 메인 화면 구성은 비슷합니다. 다른 점이 있다면 앞서 말씀드렸듯이 결과 내용을 팝업(모달)창을 이용해서 사용자에게 보여질 수 있도록 하는 것입니다.
시작 화면에는 앞서 만들었던 것과 같이 콘텐츠 제목과 시작 문구, 시작 하기 버튼으로 구성되어 있습니다.
메인 화면에는 콘텐츠 내용에 스톱워치처럼 시간을 나타내는 텍스트가 들어갈 것입니다. 그리고 아래에는 시간을 시작하는 버튼과 멈추는 버튼을 만들 것입니다. 스톱워치를 보면 시간을 멈췄다가 다시 시작하는 기능도 있지만, 저희가 만들고자 하는 콘텐츠에는 필요 없는 기능이기 때문에 배제하였습니다. 시간을 멈추는 버튼을 누르면 바로 결과 화면 팝업이 뜨도록 할 것입니다.
결과 화면에는 메인 화면에서 멈춘 시간을 표시해주고, 목표로 정한 시간에 정확하게 일치하는지, 일치하지 않는지를 검사하여 문구로 표시해 줄 예정입니다. 그리고 하단에는 다시 하기 버튼을 두어 다시 스톱워치가 있는 메인 화면으로 돌아 갈 수 있도록 할 것입니다.
폴더 및 파일
이번에도 폴더는 js와 css 2개이고, 파일은 js폴더(scripts.js), css(style.css), index.html 3개입니다.
시작 화면 페이지
시작 화면은 위와 같습니다.
저는 목표 시간을 5초로 설정할 것이기 때문에 콘텐츠 제목을 "5초 맞추기"로 하였습니다.
각자 자기가 원하는 시간을 설정하면 될 듯합니다. 이 부분은 다음 시간에 자바스크립트 코드에서 설명하도록 하겠습니다.
[ index.html ]
[ style.css ]
[ style.css ]
[ style.css ]
시작 화면은 여태 만들어온 콘텐츠와 거의 비슷합니다.
문제 번호가 필요 없어졌기 때문에 시작 문구로 대체를 하였습니다.
기존에는 page 클래스를 가진 div태그 아래에서 시작 화면 페이지, 메인 화면 페이지, 결과 화면 페이지를 하나로 묶어서 변경되도록 구성하였는데, 이번에는 가장 상위 단에서 시작 화면 페이지와 메인 화면 페이지가 변경되도록 구성하였습니다. 똑같이 hidden 클래스를 사용하여 해당 페이지에 맞는 화면이 나타나도록 할 것입니다.
이번에는 결과 화면을 팝업(모달)창으로 만들다보니 css 코드가 조금 길어졌습니다. 대략적인 내용은 한 줄씩 읽어 보시면 바로 이해하실 수 있을 것입니다.
스톱워치를 00.000형태로 만들고 테스트를 진행해보니, 폰트 모양에 따라 글자 가로 간격이 줄어들었다가 늘어났다가 하는 현상이 발생하는 걸 볼 수 있었습니다. 크게 문제 될 것은 없지만 그래도 사용자 입장에서는 글자 가로 간격이 고정되어 있어야 보기 편할 것 같았습니다. 그래서 99~100번째에 font-variant-numeric: tabular-nums; , font-feature-settings: 'tnum'; 코드를 삽입하여 폰트 가로 간격이 일정하게 유지 될 수 있도록 하였습니다.
팝업(모달)창이 생성되면 뒤 배경 화면은 약간 어둡게 처리하였고, 팝업(모달)창은 화면 정중앙에 위치하도록 코드를 작성하였습니다.
css부분은 본인 입맛에 맞게 사용자가 보기 편하게 만드는 것이 정답인 것 같습니다. 각자 자신만의 디자인대로 만들어보심을 추천드립니다.
OX 퀴즈, 나라 수도 퀴즈, 구구단 퀴즈, 같은 그림 찾기에 이어서 벌써 5번재 콘텐츠네요.
오늘은 스톱워치(목표 시간을 맞춰라!) 콘텐츠를 만들기 위한 설계와 시작 화면 페이지 구성, 전체적인 css 코드에 대해서 포스팅을 해보았습니다. 다음 시간에는 메인 화면 페이지를 만들어보고, 각각의 기능들과 함수들에 대해 자바스크립트 코드를 작성하도록 하겠습니다.