[프로젝트] 클릭에 의해 웹상의 글자 확대, 축소 기능 구현 ($(this)선택자) : Programming Story

1. 프로젝트 소개

이번 실습은 $(this)의 사용법을 잘 알고 있으면 구현할 수 있는 것이다.

$(this) 선택자를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있는 것이다.

이 선택자를 사용하면 같은 class 안에 있는 요소들 중에서 어느 곳에서 이벤트가 발생했는지를 알 수 있다.

대표적으로 index(this)를 사용하여 해당 인덱스를 return하는 경우가 일반적이다.

이번 실습에서는 글자 확대 버튼, 글자 축소버튼, 원상복구 버튼 이렇게 세 가지를 각각 다른 class로 만들고 hasClass라는 메서드를 활용하여 각각에 해당하는 이벤트를 구현해보겠다.

2. 프로젝트 구현 스펙

우선 이 포르젝트를 설명해보자면,

글자의 크기는 15px가 기본이다. 즉 사용자가 아무 버튼도 누르지 않았을 경우 글자 크기는 15px부터 시작한다. 여기서 축소 버튼을 누르면 1 px씩 작아지고 확대 버튼을 누르면 1px씩 증가한다. (물론 버튼은 body 태그 부분에다가 넣어주면 된다)
화면에 있는 글씨들의 크기가 해당 버튼에 따라 바뀌는 것이다. 하지만 너무 커지거나 너무 작아지는 것을 방지하기 위해서 글씨 크기는 최대 30px, 최소 5px로 제한을 두는 것이 필요하다.
그리고 가운데에 있는 버튼 '원래 상태 돌아가기'를 누르면 원래 상태였던 15px로 다시 돌아가는 것이다.

3. body 태그

우선 body 태그부터 살펴보자.

<body>
	<p class="zoomBtnZone">
		<button class="zoomOut">-</button>
		<button class="original">원래상태 돌아가기</button>
		<button class="zoomIn">+</button>
	</p>
	<p class="fontSize">15px</p>
	<div id="wrap">
		This is the part where the main text is exhibited onto the screen.
	</div>
</body>

크게 zoomBtnZone이라는 클래스 안에 세 가지의 버튼이 고유한 클래스명을 가지고 있다.

그 다음에 현재 폰트사이즈를 알려주는 <p class="fontSize">라는 부분이 있다. 이 부분은 버튼을 누름에 따라서 지속적으로 바뀌어야 할 부분이다. 즉 script 코드 부분에서 수정이 필요하다.

4. script 태그

이제 <script> 태그 안의 부분을 살펴볼 것인데,

먼저 폰트사이즈를 나타낼 수 있는 변수를 하나 설정한다.

우리의 시작사이즈는 15px이므로,

var startingSize = 15;

이렇게 적어두고 시작한다.

다음으로 버튼이 눌렸을 때의 이벤트를 처리해야 하는데 모든 버튼이 "zoomBtnZone"이라는 class명을 가진 p 태그 안에 있으므로 해당 클래스의 버튼이 눌렸을 때 처리해줄 함수를 구현해주면 되는 것이다.

$(".zoomBtnZone button").on("click", zoomInOut);

우리는 해당 클래스 안의 아무 버튼이 눌리면 zoomInOut이라는 함수를 호출할 것이라는 것이다.

하지만 여기서 문제는 zoomBtnZone에는 세 가지의 버튼이 있고 각각의 버튼에 따라서 서로 다른 결과를 내야 한다.

따라서 이 경우 조건문과 $(this).hasClass("class 명") 메서드를 사용하여 해당 이벤트가 어디로부터 왔는지를 파악해야 한다.

if($(this).hasClass("zoomOut")){
			if(startingSize<=5) return false;
			startingSize--;
		} else if($(this).hasClass("zoomIn")){
			if(startingSize>=30) return false;
			startingSize++;
		} else {
			startingSize = 15;
		}

조건문을 구현하면 위와 같다. 5px 이하, 30px 이상일 경우에는 변동이 없어야 하므로 return false를 해주고 그렇지 않은 경우에는 초기에 설정해두었던 startingSize를 변경한다.

하지만 여기까지만 변경을 하면 우리가 화면에 보여지게 되는 글씨의 크기에는 변동이 없다.

$(".fontSize").text(startingSize + "px");
$("body").css({fontSize:startingSize + "px"});

따라서 위의 코드처럼 텍스트로 현재의 사이즈를 출력해주고 실제 사이즈 또한 startingSize와 같게끔 코드를 적어주면 된다.

이것들을 추가한

script의 코드의 전체는

<script src="js/jquery.js"></script>
<script>
$(function(){
	var startingSize = 15;
	$(".zoomBtnZone button").on("click", zoomInOut);
	function zoomInOut( ) {
		if($(this).hasClass("zoomOut")){
			if(startingSize<=5) return false;
			startingSize--;
		} else if($(this).hasClass("zoomIn")){
			if(startingSize>=30) return false;
			startingSize++;
		} else {
			startingSize = 15;
		}
		$(".fontSize").text(startingSize + "px");
		$("body").css({fontSize:startingSize + "px"});
	}
});
</script>

위와 같다.

5. 전체 코드

전체 코드를 살펴보면, 아래와 같이 작성할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 이벤트 </title>  
<style>
	body{font: 15px Malgun Gothic, "맑은고딕",sans-serif;}
	.zoomBtnZone{font-size: 15px;}
</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
	var startingSize = 15;
	$(".zoomBtnZone button").on("click", zoomInOut);
	function zoomInOut( ) {
		if($(this).hasClass("zoomOut")){
			if(startingSize<=5) return false;
			startingSize--;
		} else if($(this).hasClass("zoomIn")){
			if(startingSize>=30) return false;
			startingSize++;
		} else {
			startingSize = 15;
		}
		$(".fontSize").text(startingSize + "px");
		$("body").css({fontSize:startingSize + "px"});
	}
});
</script>
</head>
<body>
	<p class="zoomBtnZone">
		<button class="zoomOut">-</button>
		<button class="original">원래상태 돌아가기</button>
		<button class="zoomIn">+</button>
	</p>
	
	<div id="wrap">
		<p class="fontSize">15px</p>
		This is the part where the main text is exhibited onto the screen.
	</div>
</body>
</html>

6. 결과

이것들을 구현하고 control Alt O를 눌러 실제 웹상에서 확인해보면,

우리가 예상한 대로 3가지의 버튼이 잘 작동하는 것을 알 수 있다.