[HTML5] 웹 메모장 만드는 법

I-ri 발행일 : 2023-05-26

728x90

#주의#

이 글은 강의 글이 아닙니다

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

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

웹 메모장 만들기 : 1단계

오랜만에 html관련하여 글을 적으려니 기분이 묘하지만 진행하겠습니다. 우선 Visual Studio code를 켜주시고 아주 기본적인 코드를 작성해 보겠습니다.

html:5

작성이 끝났다면 아래와 같은 코드로 작성이 되실 겁니다.

<!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>Document</title>
</head>
<body>
    
</body>
</html>

웹 메모장 만들기 : 2단계

<head> 태그에 <title>과 <style>을 추가합니다.

	<title>웹 메모장</title>

<Style>의 색은 마음대로 하시면 됩니다.

	<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>

여기까지 완료가 되셨다면 이제 <body> 태그를 손보겠습니다.

웹 메모장 만들기 : 3단계

<body> 태그에는 <div class>와 <script>를 넣어줄 겁니다. 아래에 있는 코드를 넣어주세요. 버튼의 이름은 저장을 Save로 바꾼다던지 마음대로 하셔도 됩니다.

	<div class="container">
		<h1>웹 메모장</h1>
		<textarea id="memo"></textarea>
		<button onclick="saveMemo()">저장</button>
		<button onclick="loadMemo()">불러오기</button>
	</div>

아래는 <script>입니다.

	<script>
		function saveMemo() {
			var memo = document.getElementById("memo").value;
			localStorage.setItem("memo", memo);
			alert("메모가 저장되었습니다.");
		}

		function loadMemo() {
			var memo = localStorage.getItem("memo");
			if (memo) {
				document.getElementById("memo").value = memo;
				alert("메모가 불러와졌습니다.");
			} else {
				alert("저장된 메모가 없습니다.");
			}
		}
	</script>

완료되셨다면 아래와 같은 모습의 웹 메모장 웹사이트가 만들어졌을 겁니다.

웹 메모장 만들기 : 4단계

마지막으로 전체 코드를 작성해드리겠습니다.

<!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);
			alert("메모가 저장되었습니다.");
		}

		function loadMemo() {
			var memo = localStorage.getItem("memo");
			if (memo) {
				document.getElementById("memo").value = memo;
				alert("메모가 불러와졌습니다.");
			} else {
				alert("저장된 메모가 없습니다.");
			}
		}
	</script>
</body>
</html>