본문 바로가기

[HTML5] 웹 메모장 만드는 법 (폰트 색상 선택 기능 추가하기)

I-ri 발행일 : 2023-05-26
728x90
반응형

#주의#

이 글은 강의 글이 아닙니다

틀린 부분, 깔끔하지 못한 부분 있을 수 있습니다.

지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각합니다.

개요

이번에는 글자의 색상을 바꾸는 기능을 구현해보겠습니다. 글자의 색상을 바꾸기 위해서는 색상 선택을 위한 네 개의 div 요소를 추가해야 합니다.  각 div 요소는 color-box 클래스를 가지며, 배경 색상과 onclick 이벤트를 설정하였습니다. onclick 이벤트에서는 changeColor 함수를 호출하며, 선택한 색상을 인자로 전달합니다. changeColor 함수에서는 memo 요소의 글자 색상을 선택한 색상으로 변경합니다.

이전 코드

<!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>
	<link href="https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<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 {
			cursor: pointer;
			margin-right: 10px;
		}
		.align {
			display: inline-block;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>웹 메모장</h1>
		<div class="row mb-3">
			<div class="col-md-6">
				<button class="btn btn-success" onclick="saveMemo()"><i class="bi bi-save"></i> 저장</button>
				<button class="btn btn-primary" onclick="loadMemo()"><i class="bi bi-folder2-open"></i> 불러오기</button>
			</div>
			<div class="col-md-6 text-end">
				<select class="form-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 class="form-select" onchange="changeFontSize()">
					<option value="10px">작게</option>
					<option value="14px">보통</option>
					<option value="18px">크게</option>
				</select>
				<div class="align">
					<button class="btn btn-outline-secondary" onclick="alignLeft()"><i class="bi bi-text-left"></i> 왼쪽 정렬</button>
					<button class="btn btn-outline-secondary" onclick="alignCenter()"><i class="bi bi-text-center"></i> 가운데 정렬</button>
					<button class="btn btn-outline-secondary" onclick="alignRight()"><i class="bi bi-text-right"></i> 오른쪽 정렬</button>
				</div>
			</div>
		</div>
		<textarea id="memo"></textarea>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
	<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;
		}
    
        function alignLeft() {
            document.getElementById("memo").style.textAlign = "left";
        }
    
        function alignCenter() {
            document.getElementById("memo").style.textAlign = "center";
        }
    
        function alignRight() {
            document.getElementById("memo").style.textAlign = "right";
        }
	</script>
</body>
</html>

폰트 색상 선택 기능 추가

우선 <style>태그에 .color-box { 를 추가해주겠습니다.

        .color-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid black;
            margin-right: 10px;
            cursor: pointer;
        }

그 다음 폰트의 색상을 선택하는 버튼을 만들어줍니다. <body>부분에 아래의 코드를 넣어줍니다.

<div class="color-box" style="background-color: black" onclick="changeColor('black')"></div>
<div class="color-box" style="background-color: red" onclick="changeColor('red')"></div>
<div class="color-box" style="background-color: blue" onclick="changeColor('blue')"></div>
<div class="color-box" style="background-color: green" onclick="changeColor('green')"></div>

마지막으로 JavaScript부분에 색상을 바꿔주는 기능을 추가하면 됩니다.

        function changeColor(color) {
            document.getElementById("memo").style.color = color;
        }

그러면 아래의 사진처럼 폰트의 색상을 변경할 수 있는 기능이 추가된것을 확인하실 수 있을겁니다.

전체 코드

<!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>
	<link href="https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<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 {
			cursor: pointer;
			margin-right: 10px;
		}
		.align {
			display: inline-block;
			margin-right: 10px;
		}
        .color-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 1px solid black;
            margin-right: 10px;
            cursor: pointer;
        }
	</style>
</head>
<body>
	<div class="container">
		<h1>웹 메모장</h1>
		<div class="row mb-3">
			<div class="col-md-6">
				<button class="btn btn-success" onclick="saveMemo()"><i class="bi bi-save"></i> 저장</button>
				<button class="btn btn-primary" onclick="loadMemo()"><i class="bi bi-folder2-open"></i> 불러오기</button>
			</div>
			<div class="col-md-6 text-end">
				<select class="form-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 class="form-select" onchange="changeFontSize()">
					<option value="10px">작게</option>
					<option value="14px">보통</option>
					<option value="18px">크게</option>
				</select>
				<div class="align">
					<button class="btn btn-outline-secondary" onclick="alignLeft()"><i class="bi bi-text-left"></i> 왼쪽 정렬</button>
					<button class="btn btn-outline-secondary" onclick="alignCenter()"><i class="bi bi-text-center"></i> 가운데 정렬</button>
					<button class="btn btn-outline-secondary" onclick="alignRight()"><i class="bi bi-text-right"></i> 오른쪽 정렬</button>
				</div>
				<div class="color-box" style="background-color: black" onclick="changeColor('black')"></div>
				<div class="color-box" style="background-color: red" onclick="changeColor('red')"></div>
				<div class="color-box" style="background-color: blue" onclick="changeColor('blue')"></div>
				<div class="color-box" style="background-color: green" onclick="changeColor('green')"></div>
			</div>
		</div>
		<textarea id="memo"></textarea>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
	<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;
		}
    
        function alignLeft() {
            document.getElementById("memo").style.textAlign = "left";
        }
    
        function alignCenter() {
            document.getElementById("memo").style.textAlign = "center";
        }
    
        function alignRight() {
            document.getElementById("memo").style.textAlign = "right";
        }
    
        function changeColor(color) {
            document.getElementById("memo").style.color = color;
        }
	</script>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'개발 이야기 > [HTML5]' 카테고리의 다른 글

[HTML5] 로또추첨기 만들기  (45) 2023.07.10
[HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기)  (2) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기)  (2) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기)  (4) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기)  (2) 2023.05.26

관련글

댓글

티스토리툴바