[#2년반-1] #C0FFEE

※ #C0FFEE의 About 버튼과 연결된 페이지입니다.

1. 이름 : #C0FFEE - Color Guessing Game

2. 기간 : 2016/12/18 - 2016/12/25 (https://github.com/lleellee0/C0FFEE/commits/master)

3. URL : Github(소스코드) - https://github.com/lleellee0/C0FFEE , Cloud9(플레이 가능) - https://c0ffee-biteth.c9users.io/index.html

4. 사용언어 : HTML, CSS(Transition, Animation), JavaScript(jQuery)

5. 사용도구 : 텍스트에디터(Sublime Text 3), Git(SourceTree), Web Browser(Google Chrome), 폰트(Hanna)

6. 참고

 - HTML 색상표 : http://www.nazuni.pe.kr/web/design/color/colorname.php

 - Codepen의 The Color Guessing Game : https://codepen.io/whimsyscript/pen/revxWR

 - Progress Bar 버그 해결 : http://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes/3485654#14382251

 - 박종명의 아름다운 개발 [CSS3] TRANSITION : http://m.mkexdev.net/81

 - Codepen의 Progress Bar : http://codepen.io/marcobiedermann/pen/LExXWW

 - Hex To RGB, RGB To Hex : http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

 - 보색(Complementary Color) 구하기 : http://cafe.daum.net/XBrain/UeI/40?q=D_oLHCIrjQufI0&

 - 미디어 쿼리 : http://aboooks.tistory.com/365

 - 모바일 기기에 미디어 쿼리 적용(Viewport) : https://chongmoa.com:45183/mobile/3240

 - 당신은 모를 수도 있는 CSS의 7가지 단위(vmin) : https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

---

실행화면

(1) 데스크톱

시작화면

카운트다운

플레이중

결과화면

(2) 모바일

시작화면

플레이중

결과화면

---

개발하면서 애먹었던 점

1. Progress Bar 애니메이션 도중 Width 변경할 때 Width를 변경했는데 도중에는 변경이 안되었다. 

- 이 링크를 보고 해결했다.

2. Progress Bar 애니메이션 시간과 JavaScript의 타이머 시간을 동기화 시켜주는 것

- 이리저리 계산해보았고 제법 빨리 해결했음

3. 오답일 경우 Progress Bar의 Width와 타이머 시간을 줄이는 것

- 얼추 맞고 있으나 종종 시각적으로는 Width가 늘어나는 경우가 발생.. 해결해주시는 분께 감사드립니다.

4. 모바일 UI

- 먼저 데스크톱에 맞춰서 CSS를 코딩하고 미디어 쿼리로 모바일도 처리해주었는데 공통된 부분을 합치는 등 깔끔하게 만들어야함.

후기

배운것도 있지만 너무 기계적이고 반복적으로 코딩하고 있는 것 같기도 하다.

jQuery를 벗어나 봐야겠다. Hard Mode는 진짜 어렵다.