[HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기)
728x90
반응형
#주의#
이 글은 강의 글이 아닙니다
틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다.
개요
저번 포스팅에서 폰트를 수정할 수 있는 기능을 추가해 보았습니다. 이번에는 폰트 크기를 조절할 수 있는 기능을 추가해 볼 것입니다. 기본적으로 문서나 메모 작성이 가능한 프로그램 및 앱에서는 폰트 변경과 폰트의 크기를 변경할 수 있기 때문에 해당 기능을 추가할 것입니다.
이전 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 메모장</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: white;
}
.container {
margin: 50px auto;
max-width: 800px;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
textarea {
width: 100%;
height: 300px;
border: none;
padding: 10px;
font-size: 16px;
resize: none;
}
button {
background-color: green;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
select {
background-color: white;
color: black;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
<link href="https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css" rel="stylesheet">
<!-- 한글 폰트 추가 -->
</head>
<body>
<div class="container">
<h1>웹 메모장</h1>
<textarea id="memo"></textarea>
<div>
<button onclick="saveMemo()">저장</button>
<button onclick="loadMemo()">불러오기</button>
<select onchange="changeFont()">
<option value="Arial, sans-serif">Arial</option>
<option value="Times New Roman, serif">Times New Roman</option>
<option value="Courier New, monospace">Courier New</option>
<option value="Verdana, sans-serif">Verdana</option>
<option value="Nanum Gothic, sans-serif">나눔고딕</option>
<!-- 한글 폰트 추가 -->
</select>
</div>
</div>
<script>
function saveMemo() {
var memo = document.getElementById("memo").value;
localStorage.setItem("memo", memo);
// 텍스트 파일로 저장
var textFile = null;
var data = new Blob([memo], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
var link = document.createElement('a');
link.setAttribute('download', 'memo.txt');
link.href = textFile;
document.body.appendChild(link);
link.click();
alert("메모가 저장되었습니다.");
}
function loadMemo() {
var memo = localStorage.getItem("memo");
if (memo) {
document.getElementById("memo").value = memo;
alert("메모가 불러와졌습니다.");
} else {
alert("저장된 메모가 없습니다.");
}
}
function changeFont() {
var font = document.querySelector("select").value;
document.getElementById("memo").style.fontFamily = font;
}
</script>
</body>
</html>폰트 크기 조절 기능 추가
해당 기능을 추가하기 위해서는 우선 <style> 태그의 select부분을 수정하시면 됩니다.
select {
background-color: white;
color: black;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}이전 코드와 다르게 margin-right: 10px; 한 줄 만 추가되었습니다. 그리고 이번에는 <body> 부분을 수정해야 합니다.
<body> 부분을 보면 </select>가 있을 것입니다. 그 아래에 이 코드를 넣어주면 됩니다.
<select onchange="changeFontSize()">
<option value="10px">작게</option>
<option value="14px">보통</option>
<option value="18px">크게</option>
</select>이 부분에서 option value에 원하는 폰트 사이즈를 넣어도 상관없습니다. 그리고 작게, 보통, 크게 세 가지로 적어놨는데 이것을 폰트 크기대로 작성해 줘도 상관없습니다. 예를 들어 폰트 크기가 10이라면 10으로 작성하셔도 된다는 말입니다.
마지막으로 JavaScript에 해당하는 부분을 수정해 주면 됩니다. <script> 맨 밑 부분 즉, </script> 바로 위에 이 코드를 넣어주시면 됩니다.
function changeFontSize() {
var size = document.querySelectorAll("select")[1].value;
document.getElementById("memo").style.fontSize = size;
}그리고 저장을 하시면 아래와 같은 사진으로 나타납니다.
전체 코드
아래는 전체코드이니 위에 해보시고 안되시면 참고하여 수정해 보도록 하시면 좋을 것 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹 메모장</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: white;
}
.container {
margin: 50px auto;
max-width: 800px;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
textarea {
width: 100%;
height: 300px;
border: none;
padding: 10px;
font-size: 16px;
resize: none;
}
button {
background-color: green;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
select {
background-color: white;
color: black;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
margin-right: 10px;
}
</style>
<link href="https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css" rel="stylesheet">
<!-- 한글 폰트 추가 -->
</head>
<body>
<div class="container">
<h1>웹 메모장</h1>
<textarea id="memo"></textarea>
<div>
<button onclick="saveMemo()">저장</button>
<button onclick="loadMemo()">불러오기</button>
<select onchange="changeFont()">
<option value="Arial, sans-serif">Arial</option>
<option value="Times New Roman, serif">Times New Roman</option>
<option value="Courier New, monospace">Courier New</option>
<option value="Verdana, sans-serif">Verdana</option>
<option value="Nanum Gothic, sans-serif">나눔고딕</option>
<!-- 한글 폰트 추가 -->
</select>
<select onchange="changeFontSize()">
<option value="10px">작게</option>
<option value="14px">보통</option>
<option value="18px">크게</option>
</select>
</div>
</div>
<script>
function saveMemo() {
var memo = document.getElementById("memo").value;
localStorage.setItem("memo", memo);
// 텍스트 파일로 저장
var textFile = null;
var data = new Blob([memo], {type: 'text/plain'});
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
var link = document.createElement('a');
link.setAttribute('download', 'memo.txt');
link.href = textFile;
document.body.appendChild(link);
link.click();
alert("메모가 저장되었습니다.");
}
function loadMemo() {
var memo = localStorage.getItem("memo");
if (memo) {
document.getElementById("memo").value = memo;
alert("메모가 불러와졌습니다.");
} else {
alert("저장된 메모가 없습니다.");
}
}
function changeFont() {
var font = document.querySelector("select").value;
document.getElementById("memo").style.fontFamily = font;
}
function changeFontSize() {
var size = document.querySelectorAll("select")[1].value;
document.getElementById("memo").style.fontSize = size;
}
</script>
</body>
</html>
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기) (2) | 2023.05.26 |
|---|---|
| [HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (저장해서 txt파일로 다운받기) (6) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (2) | 2023.05.26 |
댓글