[HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기)
728x90
반응형
#주의#
이 글은 강의 글이 아닙니다
틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다.
개요
이전 포스팅에서 저장하면 txt파일로 다운로드할 수 있는 기능까지 구현해 봤습니다. 이제 메모장의 필수 기능인 폰트 선택 기능을 구현해 보겠습니다. 폰트 선택 기능을 추가하기 위해서는 몇 가지 코드만 추가해 주면 됩니다.
이전 코드
아래는 이전 포스팅까지의 코드입니다.
<!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;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 메모장</h1>
<textarea id="memo"></textarea>
<button onclick="saveMemo()">저장</button>
<button onclick="loadMemo()">불러오기</button>
</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("저장된 메모가 없습니다.");
}
}
</script>
</body>
</html>폰트 선택 기능 추가
우선 <head>태그에 있는 <style>에 아래와 같은 코드를 작성해 줍니다.
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">위 코드에서는 link 태그를 추가하여 나눔고딕 폰트를 불러왔습니다. select 태그에 나눔고딕 옵션을 추가한 것입니다. 이제 <body> 부분에 코드를 추가하겠습니다.
<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>changeFont() 함수에서 해당 폰트 이름을 적용하도록 수정했습니다. 나눔 고딕 위에는 기본적으로 HTML에서 사용 가능한 폰트라서 따로 link태그에 추가해주지 않아도 됩니다.
마지막으로 <script> 부분에 changeFont()가 작동하도록 코드를 추가해 주겠습니다.
function changeFont() {
var font = document.querySelector("select").value;
document.getElementById("memo").style.fontFamily = font;
}코드를 추가하고 저장 후 웹페이지를 작동시켜 보면 아래와 같이 폰트 선택창이 보이고 선택지가 나타나는 것이 보일 겁니다.
전체 코드
<!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>
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기) (2) | 2023.05.26 |
|---|---|
| [HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기) (4) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (저장해서 txt파일로 다운받기) (6) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (2) | 2023.05.26 |
| [HTML5] - 23 - 페이지네이션 기능이 추가된 웹페이지 만드는 법 (4) | 2023.05.10 |
댓글