프론트엔드6-2. [jquery 예제] jquery를 이용해서 글자 크기 변경

단위가 px이든, em이든, cm이든 컴퓨터는 모두 px로 인식한다.
버튼을 눌러서 글자 크기를 작게 하거나 기본 크기로 하거나 크게 한다.

1. HTML 파일

<body>
<div>
	<button>-</button>
	<button>0</button>
	<button>+</button>
</div>
<div> 
게임·웹툰 등 일부 앱들은 이용자가 광고 영상을 수십초 재생하면 서비스를 무료로 제공한다.이 광고 모델을 기반으로 스마트폰 카메라를 이용해 사용자 눈을 추적한 뒤, 화면을 보지 않으면 광고 영상이 일시 정지되는 앱이 등장해 눈길을 끌고 있다.
바이스닷컴·기가진 등 외신에 따르면 ‘무비패스’라는 앱은 월정액 요금을 내면 하루 1개 영화를 볼 수 있는 서비스다. 
하지만 회사가 어려워지면서 2019년 9월 서비스가 종료되고, 회사는 2020년 파산을 선언했다.
그 뒤 회사에서 쫓겨났던 공동 창업자인 스테이시 스파이크 씨가 무비패스를 인수, 올 여름 서비스 재개가 이뤄질 예정이다.
무비패스2.0 간담회에서 스파이크 대표는 광고를 보는 것만으로 영화표 구입에 사용할 수 있는 가상화폐를 받을 수 있는 앱 ‘프리쇼’도 발표했다.
</div>
</body>
</html>

2. JS파일

$(function(){
	
    $("button").click(function(){
    
    console.log($("div:last").css("font-size"));
    
    //console.log($("div:nth-of-type(2)").css("font-size"));
    //console.log($("div").last().css("font-size"));
    //console.log($("div:eq(1)").css("font-size"));
    
    });
});

버튼 선택자를 누를 때마다 문장이 있는 div의 현재 글자 크기를 console창에 나타낸다.(현재 기본 글자크기는 16px)

- 버튼을 누르면 현재 사이즈를 -- 하고 0 버튼을 누르면 사이즈 16 유지 + 버튼을 누르면 ++ 한다.
버튼의 인덱스를 구해서 0 : 점점 작게, 1: 기본 크기(16px) 2: 점점 크게 한다.

$(function(){
	$("button").on('click', function(){

		let idx = $("button").index(this);
        
		// parseInt 가능하다. 숫자로 하게되면 받아올때 숫자 뒤의 px이 없어짐
		let size = parseFloat($("div").last().css("font-size"));
		
		if(idx==0){
			size--;
		}else if(idx==1){
			size = 16;
		}else if(idx==2){
			size++;
		}
        
		// 글자 크기 셋팅(css는 px을 붙여줘야 함)
		$("div:nth-of-tyepe(2)").css("font-size", size+"px")
		
	});
});

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드6-4. jquery플러그인 easing/checkeditor/ bxslider / dialog (0)	2022.02.18
프론트엔드6-3. [jquery 예제] review 기능과 게시판 기능 만들기 (0)	2022.02.17
프론트엔드6-1. [jquery 예제] 영화포스터 움직이는 바 만들기-2 (0)	2022.02.17
프론트엔드5-10. jquery animate( ) (0)	2022.02.17
프론트엔드5-9. jquery의 effect(숨김,표시)slide, fade (0)	2022.02.16