[jQuery] 글자 폰트 사이즈 늘리고 줄이기 예제

	.label {
		font-weight: bold;   /* 글자를 진하게 */
		font-size: 12pt;
		margin: 20px 0;     /* 바깥 위아래 여백을 20px 준다. */
	}
	.button {
		width: 200px;
		border: 1px solid #CCCCCC;   /* 테두리를 1px크기의 실선으로 #CCCCCC 색깔로 입힌다. */
		background-color: #EEEEEE;   /* 배경색 */
		padding: 2px;
		margin: 10px 0;
	}

스타일시트에 label과 button  클래스를 정의합니다.

$(document).ready(function() {

	$("div.button").click(function() {
		var $speech = $("div.speech");
		var currentSize = $speech.css("fontSize");	/* 폰트사이즈를 알아낸다. */
		var num = parseFloat(currentSize, 10);	/* parseFloat()은 숫자가 아니면 숫자가 아니라는 뜻의 NaN을 반환한다. */
		var unit = currentSize.slice(-2);	/* 끝에서부터 두자리의 문자를 가져온다. */

		if(this.id == "switcher-large"){
			num *= 1.4;	/* num = num * 1.4 와 동일하다. */
		} else if(this.id == "switcher-small") {
			num /= 1.4;	/* num = num / 1.4 와 동일하다. */
		}

		$speech.css("fontSize", num + unit);
	});

});

DOM이 로드되고 이미지가 로드되기 전에  $(document).read() 함수가 실행됩니다.

$("div.button").click(function() {...} ==>  div 태그 중에 class="button"으로 정의된 영역을 클릭하면 실행하는 명령들입니다.