나아가는 길에 발자국을 찍어보자

1. 실시간 마우스 탐지 첫번째로 만든 기능은 마우스 위치를 감지하여 베리어블 폰트 속성 값을 변화 시키는 기능을 구현하였다. 글씨를 쓸수있는 공간 마우스 위치를 감지하여 폰트 속성을 변화시키는 기능 => 페이지 내에 마우스 포인터의 위치를 get하는 함수 사용. $(document).mousemove(function(event){ $("span").text(event.pageX + ", " + event.pageY); }); 적용한 내 코드 => 포이터 위치를 받아와 YEAR값과 TEMP값에 매칭시킨 후 베리어블 폰트 속성을 바꾼다. (연산식은 미대생이 준비해줬다아) $(document).mousemove(function(event){ var width_size = window.outerWidth; i..

슬라이드 바 형식의 기능을 만들어주고 디자인의 세부적인 것을 미대생이 고치고 있을 무렵, 미대생은 더 나은 폰트 페이지를 위해 여러 페이지를 돌아다니며 서칭 하던 중 엄청난 페이지를 발견했다고 보여주었다. 그곳은 여기 https://scope-typeface.com/ Scope Scope is a monolinear typeface designed with typographic interaction in mind. scope-typeface.com 전에도 링크를 걸어 뒀던 페이지다. 이 페이지를 보고 자신의 페이지도 이런식으로 되어 있으면 좋겠다고 눈을 빛내며 찾아왔다. 그렇다. 저말은 곧 내가 그전에 만들었던 슬라이바 기능은 쓰지 않는다는 말이었다. 눈물이 앞을 가렸다... 그래도 어쩌겠는가 클라이언트..

글씨를 쓰는 공간이 있으면 좋겠다 (1줄로 쭉쭉 쓸거다) =>input 태그로 한줄을 입력 받는다. 슬라이드 바로 베리어블 폰트 속성값을 바꿀 수 있어 쓴 글씨들의 모양 변화가 보여졌으면 좋겠다. => 실시간 감지 필요 그 밑에 4가지의 극점 스타일이 보여졌으면 좋겠다. => 입력된 input값과 동일하게 써지는 실시간 감지 필요. 이렇게 였기때문에 우선 슬라이드바를 만들고 움직임의 값에 따라 해당값을 실시간으로 css에 적용시켜야하는 것으로보고 자료를 찾아보다가 제이쿼리 예제가 많이 나와 제이쿼리를 써서 만들어보기로 했다.(javascript는 실시간으로 하기가 안되는 것 같다..) 후에는디자인 문제로 를 이용했지만 초반엔 제이쿼리-ui에서 지원해주는 슬라이드바를 이용했다. 1..

타이핑 페이지에는 꽤나 많은 이야기들이 있다. 초반에는 포스팅 글로 쓸게 많을 것이라 생각 못 했는데, 지금까지 일들을 정리하고 적어보자니 꽤나 이야기할게 많다. 단순한 웹페이지 하나에 간단한 기능 한개에서 반응형으로 보여지는 기능이 추가 되더니 다른 기능에 꽂혀서 완전히 다른형태로 개발을 다시 해야했고 종국에 모바일 버전까지 신경쓰며 웹버전과 모바일 버전의 기능이 분리된 페이지를 만들게된 이야기를 풀어보고자 한다. 저 중간중간에 테스트 겸 버그 찾아주는 코딩하는 친구가 등장하는데(이후 이름은 코딩친구라고 통일), 이 코딩친구의 훼방까지 다사 다난한 개발이었다. 뭔가 일이 다했다 싶다가도 뭐가 새로 생기고 또 코딩하고 다했다 싶다가도 또 뭐가 생기고를 반복..