본문 바로가기

[HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기)

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

#주의#

이 글은 강의 글이 아닙니다

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

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

개요

이전 포스팅에서 글꼴과 서식에 관한 내용을 다루었습니다. 이번에는 기능이 아닌 버튼을 깔끔하게 배치해 보도록 하겠습니다. 버튼의 위치나 디자인은 사용자에게 편리한 경험을 제공해야 합니다. 보기 좋은 떡이 먹기도 좋다는 말이 있듯이 사용자에게 편리하고 보기 좋게 버튼을 배치하는 것 또한 아주 중요한 것입니다.

UX(사용자 경험)와 UI(사용자 인터페이스)는 소프트웨어 개발 및 디자인 분야에서 중요한 개념입니다. UX와 UI는 서로 연관되어 있지만 다른 개념입니다. UX는 사용자의 경험을 전체적으로 고려하고 설계하는 것이며, UI는 사용자와의 상호작용을 위한 시각적인 디자인 요소를 다룹니다. 따라서 좋은 UX를 제공하기 위해서는 UI 디자인도 중요한 역할을 합니다. 사용자가 제품이나 서비스를 직관적으로 이해하고 사용할 수 있는 UI를 제공하는 것이 좋은 UX를 구현하는 한 가지 방법입니다.

UX란?

사용자 경험(UX)은 사용자가 제품 또는 서비스를 사용하는 동안 느끼는 전반적인 경험을 의미합니다. UX 디자인은 사용자의 니즈와 목표를 충족시키는 것에 초점을 맞추며, 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 지원합니다. UX 디자인은 사용자의 행동, 인지적인 요소, 감성적인 요소 등을 고려하여 사용자가 원활하고 만족스러운 경험을 할 수 있도록 설계합니다. 이를 위해 사용자 조사, 피드백 수집, 프로토타이핑, 테스트 등의 방법을 사용합니다.

UI란?

사용자 인터페이스(UI)는 사용자가 소프트웨어나 디지털 기기와 상호 작용하는 데 사용되는 시각적인 요소와 입력 방법을 의미합니다. UI 디자인은 사용자가 인터페이스를 쉽게 이해하고 조작할 수 있도록 설계합니다. 이는 화면 레이아웃, 아이콘, 버튼, 색상, 글꼴 등을 포함합니다. UI 디자인은 UX 디자인의 일부로서, 사용자 요구사항과 목표를 충족시키는 동시에 시각적으로 매력적이고 직관적인 인터페이스를 제공합니다.

이전 코드

<!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;
		}
		.align {
			display: inline-block;
			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 class="align">
				<button onclick="alignLeft()">왼쪽 정렬</button>
				<button onclick="alignCenter()">가운데 정렬</button>
				<button onclick="alignRight()">오른쪽 정렬</button>
			</div>
		</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;
		}
    
        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>

변경 사항

우선 <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> 부분에 있는 button과 select 부분을 수정해 주겠습니다. 아래의 코드를 삭제하시면 됩니다. 아래의 코드는 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;

지우고 나면 아래와 같은 <style> 코드가 완성됩니다. 아래는 <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 {
			cursor: pointer;
			margin-right: 10px;
		}
		.align {
			display: inline-block;
			margin-right: 10px;
		}
	</style>

그다음 </style>하단에 넣어져 있던 코드를 지워줍니다. 굳이 코드가 중복될 필요가 없기 때문에 최적화해준다 생각하고 지우시면 됩니다.

아래의 코드를 지워줍니다.

	<link href="https://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css" rel="stylesheet">
	<!-- 한글 폰트 추가 -->

이번에는 <body>부분을 손봐주도록 하겠습니다. 텍스트를 작성하는 폼과 버튼을 깔끔하게 바꿔주고 위치도 바꿔주겠습니다.

<h1> 웹 메모장 </h1> 바로 밑에 부분을 아래의 코드를 보고 삭제 한 뒤 수정해 주시면 됩니다.

삭제할 코드

		<textarea id="memo"></textarea>
		<div>
			<button onclick="saveMemo()">저장</button>
			<button onclick="loadMemo()">불러오기</button>
			<select onchange="changeFont()">

추가할 코드

		<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()">

그리고 <select onchange="changeFontSize()"> 이 부분을 아래의 코드로 변경해 줍니다.

<select class="form-select" onchange="changeFontSize()">

이번에는 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 버튼의 디자인을 바꿔주겠습니다.

<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>가 세 줄 있을 겁니다. 그 밑에 이 코드를 추가해주시면 됩니다.

		<textarea id="memo"></textarea>
	</div>

마지막으로 한 줄만 추가하면 끝입니다. 아래의 코드를 방금 작성한 코드 밑에 한 줄 추가해 줍니다.

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

그러면 아래의 사진과 같은 웹 메모장이 만들어질 것입니다.

전체 코드

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

 

728x90
반응형
저작자표시 비영리 변경금지

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

[HTML5] 로또추첨기 만들기  (45) 2023.07.10
[HTML5] 웹 메모장 만드는 법 (폰트 색상 선택 기능 추가하기)  (16) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (정렬 기능 추가하기)  (2) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기)  (4) 2023.05.26
[HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기)  (2) 2023.05.26

관련글

댓글

티스토리툴바