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

[타이핑 페이지 만들기_1] 제이쿼리를 사용해보자 본문

Projects/Font-page(미대생 졸전 도와주기)

[타이핑 페이지 만들기_1] 제이쿼리를 사용해보자

NAWIN 2020. 11. 18. 15:35
반응형

 

< 미대생의 요구사항 >

  • 글씨를 쓰는 공간이 있으면 좋겠다 (1줄로 쭉쭉 쓸거다)
    =>input 태그로 한줄을 입력 받는다.
  • 슬라이드 바로 베리어블 폰트 속성값을 바꿀 수 있어 쓴 글씨들의 모양 변화가 보여졌으면 좋겠다.
    => 실시간 감지 필요
  • 그 밑에 4가지의 극점 스타일이 보여졌으면 좋겠다.
    => 입력된 input값과 동일하게 써지는 실시간 감지 필요.


이렇게 였기때문에 우선 슬라이드바를 만들고 움직임의 값에 따라 해당값을 실시간으로 css에 적용시켜야하는 것으로보고

자료를 찾아보다가 제이쿼리 예제가 많이 나와 제이쿼리를 써서 만들어보기로 했다.(javascript는 실시간으로 하기가 안되는 것 같다..)

후에는디자인 문제로 <input type=range>를 이용했지만 초반엔 제이쿼리-ui에서 지원해주는 슬라이드바를 이용했다.

1. 제이쿼리의 삽입

<head> 에 제이쿼리와 ui를 삽입해야했는데 계속 ui부분이 연결이 안되서 모양이 이상하게 나왔었다.

제이쿼리는 되는데 왜안될까 하고 한참을 찾다 결국 sdk를 연결하는거 말고 직접 다운받고<script>와 <link>를 걸어보니 작동하더라...

이거 해결한다고 3일을 찾았다ㅜㅜ 처음 써보는거기도 했고, 보통 <script>만 연결하면 됐었기때문에 <link>를 걸 생각을 못했었는데,

sdk를 걸려고 노력하다 그냥 다운받아서 이것저것 연결해보다 혹시..하면서 걸어보니 동작해서 너무너무 기쁘면서도 슬펐던 일이다..

sdk 로 다시 바꿀까했지만 그냥 두기로 하고 진행했다.

<link href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>

 

2. 슬라이드바 만들기

제이 쿼리를 삽입했으니 슬라이드를 만들어서 값을 실시간으로 가져오는 기능을 만들어야했다.

슬라이드 바의 값을 실시간으로 볼수있는 <input>태그를 넣고 아래쪽에 슬라이드 바를 위한 <div>를 배치했다.

<div>
    <p style="font-family: Arial, Helvetica, sans-serif;">
        TEMP : <input class="slideval" type="text" id="TEMP-val" readonly>
    </p>
    <div class="slidebar" id="TEMP"></div>
</div>

 

 

제이쿼리를 사용해서 슬라이드바를 만들고 해당 값을 실시간으로 가져와 보여주고 font 속성에 적용하는 함수를 만든다.

$("#TEMP").slider({
                range: "max",
                min: 0,
                max: 1000,
                values: 1,
                slide: function(event, ui) {
                    $("#TEMP-val").val(ui.value); // 실시간 슬라이드 value를 input태그의 값에 넣는다
                    let year= $("#YEAR-val").val(); //temp값이 변해 바뀌어도 또다른 속성인 year의 값은 변화x
                   $("#input-letter").css('font-variation-settings',"'TEMP' "+ui.value+",'YEAR' "+year);
                }
            });
$("#TEMP-val").val($("#TEMP").slider("value"));

 

 

  • 결과 화면

    밑의 YEAR / TEMP 슬라이드바를 움직여 값을 변화시키면 "안녕하세요"글자의 모양이 바뀐다.

 

 

 

3. 4가지 극점 폰트 보여주기

입력하는 공간

<input id="input-letter" type="text">

 

입력한 값들이 보여지는 공간

​ [ 범위 ]

  • YEAR : 1930 -2020

  • TEMP : 0 - 1000

<div class=output-letter style="font-variation-settings: 'YEAR' 1930, 'TEMP' 0"></div> 
<div class=output-letter style="font-variation-settings: 'YEAR' 2020, 'TEMP' 0"></div>
<div class=output-letter style="font-variation-settings: 'YEAR' 1930, 'TEMP' 1000"></div>
<div class=output-letter style="font-variation-settings: 'YEAR' 2020, 'TEMP' 1000"></div>

 

 

사용자가 입력하면 감지하여 output-letter에 보여 진다.

 $("#input-letter").on("propertychange change keyup paste input",function(){
       $(".output-letter").html($(this).val());
 })

  • 결과 화면

반응형
저작자표시

'Projects > Font-page(미대생 졸전 도와주기)' 카테고리의 다른 글

[타이핑 페이지 만들기_2] 마우스를 움직이면 폰트가 바뀐다고  (0) 2020.11.24
[2차 미팅] 요구사항이....변했다고...? 새로 만들어야 한다고..?  (0) 2020.11.24
[타이핑 페이지 만들기_0] 클라이언트의 요구사항은 항상 변화무쌍하지  (0) 2020.11.11
[애니메이션 페이지 만들기_3]CSS에도 변수를 쓸 수 있다!  (0) 2020.11.11
[ 애니메이션 페이지 만들기_2 ] < animation > 정리  (0) 2020.11.06
'Projects/Font-page(미대생 졸전 도와주기)' Related Articles more
Comments