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

이 두개의 기능을 만들 때, 조금 머리아팠던 기능이 가운데 정렬 기능이었다. 에 height를 지정을 해버리면 박스의 맨왼쪽 윗쪽부터 글씨가 쓰여져버리고 입력되어지는 글자들의 높이가 에서 지정한 height를 넘어가게되면 슬라이드바가 생긴다.... 따라서 전체 입력된 글자들을 좌우 중앙정렬은 어렵지 않았으나, 상하 중앙 정렬이 발목을 잡았었다. 찾아보니까 라이브러리가 있긴있었다. 다만 내가 원하던 기능과 조금은 거리가 있어서 조금 더 찾아보다가 그냥 구현하기로 하였다. 중앙 정렬에 이어 미대생이 원했던 기능은 글자가 중앙 정렬이 되면서 글자수가 많아지면 글자의 크기가 줄어드는 것을 원했다. 이것도 예시 페이지를 보여줬는데, 못찾았다ㅜㅜ. 구현한 2개의 기능을 정리해 보고자 한다. 1. 정렬 1) 기능 t..

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..