<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$(function(){
// bind() : on()함수와 유사한 기능을 처리. 2개 이상의 이벤트를 연결할 때 사용함. 옛날거
// $('#button1').bind({
// 'click' : button1_clicked,
// 'mousedown' : button1_down,
// 'mouseup' : button1_up
// });
$('#button1').on({
'click' : button1_clicked,
'mousedown' : button1_down,
'mouseup' : button1_up
});
$('#button2').click(button2_clicked);
});
function button1_clicked(){
$('body').append('<br>버튼1 클릭됨');
}
function button1_down(){
$('body').append('<br>버튼1 눌림');
}
function button1_up(){
$('body').append('<br>버튼1 떼어짐');
}
function button2_clicked(){
$('body').append('<br>버튼2 클릭됨');
}
</script>
</head>
<body>
<button type="button" id="button1">버튼1</button>
<button type="button" id="button2">버튼2</button>
</body>
</html>
z
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<style>
body{font:12pt "Malgun Gothic","맑은 고딕", sans-serif;}
/* .btn{font-size:12pt;} */
</style>
<script>
$(function(){
var fSize = 14;
$(".zBtn .btn").on("click", zInOut);
function zInOut(){
if($(this).hasClass("zOut")){
if(fSize<=8) return false;
fSize--;
} else if($(this).hasClass("zIn")){
if(fSize>=50) return false;
fSize++;
} else {
fSize=12;
}
$(".fontSize").text(fSize + "pt");
/*
속성명 :
객체로 사용시 -(대시)제거 카멜기법으로 표기
css속성명 그대로 사용하는 경우는 다옴표로 묶어줌
*/
$(".fontSize, #wrap").css({'font-size':fSize + "pt"});
console.log("fonsize:"+fSize);
$("#rel_site, #rel_site option").css({'font-size':fSize + "pt"});
// $(".btn").css({'font-size':fSize + "pt"});
$("#zBtn, #zBtn .btn").css({'font-size':"12pt!important"});
}
});
</script>
</head>
<body>
<p class="zBtn">
<button class="btn zOut">-</button>
<button class="btn originBtn">100%</button>
<button class="btn zIn">+</button>
</p>
<p class="fontSize">12pt</p>
<div id="wrap">
Picture perfect memories,
Scattered all around the floor.
Reaching for the phone cause, I can't fight it any more.
And I wonder if I ever cross your mind.
For me it happens all the time.
It's a quarter after one, I'm all alone and I need you now.
Said I wouldn't call but I lost all control and I need you now.
And I don't know how I can do without, I just need you now.
Another shot of whiskey, can't stop looking at the door.
Wishing you'd come sweeping in the way you did before.
And I wonder if I ever cross your mind.
</div>
<select id="rel_site">
<option value="">사이트 선택</option>
<option value="www.google.com">구글</option>
<option value="www.naver.com">네이버</option>
<option value="www.daum.net">다음</option>
</select><br>
</body>
</html>
