[ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 크기 바꾸기
2024. 5. 20. 11:11ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 살펴 볼 주요 코드 ]
<script type="text/javascript">
window.onload = function(){
var size = 16;
changeFontSize(size);
document.querySelector(".btn-increase")
.addEventListener("click", function(){
size++;
changeFontSize(size);
});
document.querySelector(".btn-decrease")
.addEventListener("click", function(){
size--;
changeFontSize(size);
});
function changeFontSize(size) {
var editor = document.querySelector(".editor");
editor.style.fontSize = size+"px";
var display = document.querySelector(".size-display");
display.textContent = size;
}
};
</script>(+) 증가 / 감소 버튼 두 개만 있으므로 굳이 for문을 사용할 필요가 없다.
(+) 각각의 함수에서 사이즈 조절을 해주고, 그 사이즈를 적용시켜주는 함수(changeFontSize())를 호출해준 코드다
(중요) 폰트의 크기를 코드 안에 가지고 있다면?
var size = 16;
changeFontSize(size);- 텍스트를 화면에 출력되어있거나, 페이지가 가지고 있는 폰트 사이즈를 가지고 오는 것이 아니라 애초에 내장을 하게 된다면, 아무나 쉽게 접근할 수 없게 된다. 즉, 보안 강화에 좋다.
- 단, 이렇게 된다면 처음 페이지에 접속하면 사용자에게 보여지는 '현재 폰트 크기' 정보가 빈 부분이 된다. 따라서 이 폰트를 찍어주는 함수를 불러와 폰트 크기를 찍어주면 된다.
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현한 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현-->
<script type="text/javascript">
window.onload = function(){
var size = 16;
changeFontSize(size);
document.querySelector(".btn-increase")
.addEventListener("click", function(){
size++;
changeFontSize(size);
});
document.querySelector(".btn-decrease")
.addEventListener("click", function(){
size--;
changeFontSize(size);
});
function changeFontSize(size) {
var editor = document.querySelector(".editor");
editor.style.fontSize = size+"px";
var display = document.querySelector(".size-display");
display.textContent = size;
}
};
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>글자 크기 변경 문제</h1>
</div>
<div class="cell center">
<button class="btn positive btn-decrease">
<i class="fa-solid fa-minus"></i>
</button>
<span class="size-display mx-20"></span>
<button class="btn positive btn-increase">
<i class="fa-solid fa-plus"></i>
</button>
</div>
<hr>
<div class="cell">
<textarea class="editor tool w-100"
style="min-height: 250px; font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat urna massa, id dictum nibh dignissim id. Mauris in lacinia massa, at eleifend metus. Nulla mollis dictum faucibus. Donec rhoncus tellus lacus, vel pellentesque sapien bibendum in. Nullam malesuada odio eget scelerisque scelerisque. Nam auctor nulla sit amet ipsum faucibus hendrerit. Curabitur accumsan at nisl eu auctor. Quisque gravida mollis neque, eget tempor felis maximus auctor. Suspendisse potenti. Sed placerat est nisi, vitae ullamcorper dui laoreet vitae. Phasellus aliquet cursus sollicitudin. Ut vestibulum nunc ex, a gravida leo vestibulum at. Nam porta quam risus, non lacinia arcu pretium at. Proin sodales, tortor sed egestas ultrices, odio urna suscipit est, nec sollicitudin ligula metus a lorem. In hac habitasse platea dictumst.</textarea>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript / JQuery ] jQuery를 자바스크립트에서 사용해보자! (0) | 2024.05.23 |
|---|---|
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 같은 틀을 여러 번 반복해서 사용하기 (0) | 2024.05.21 |
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 이미지 크기 바꾸기 (0) | 2024.05.19 |
| [ JavaScript ] 모듈을 더욱 효율적으로 (this 사용) - 폰트 색상 바꾸기 (0) | 2024.05.17 |
| [ JavaScript ] 체크박스 제어 (0) | 2024.05.16 |