[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;
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>정렬 기능 추가
정렬 기능을 추가하기 위해 우선 아래의 코드를 <style>에 넣어줍니다.
.align {
display: inline-block;
margin-right: 10px;
}그다음 <body> 부분에 align에 해당하는 버튼을 만들어줍니다. 아래의 코드는 <body> 태그에 넣어주시면 됩니다.
<div class="align">
<button onclick="alignLeft()">왼쪽 정렬</button>
<button onclick="alignCenter()">가운데 정렬</button>
<button onclick="alignRight()">오른쪽 정렬</button>
</div>버튼까지 만들었으니 이번에는 Javascript에 기능을 넣어주면 됩니다. 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬에 해당하는 코드를 넣어줄 것입니다. 우선 왼쪽 정렬은 alignLeft(), 가운데 정렬은 alignCenter (), 오른쪽 정렬은 alignRight ()입니다. 아래의 코드를 <script>에 넣어주면 끝입니다.
function alignLeft() {
document.getElementById("memo").style.textAlign = "left";
}
function alignCenter() {
document.getElementById("memo").style.textAlign = "center";
}
function alignRight() {
document.getElementById("memo").style.textAlign = "right";
}코드를 다 넣고 저장 후 실행하면 아래처럼 작동되는 것을 확인하실 수 있습니다.
전체 코드
<!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>
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] 웹 메모장 만드는 법 (폰트 색상 선택 기능 추가하기) (16) | 2023.05.26 |
|---|---|
| [HTML5] 웹 메모장 만드는 법 (버튼 깔끔하게 배치하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (폰트 크기 조절 기능 추가하기) (4) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (폰트 선택 기능 추가하기) (2) | 2023.05.26 |
| [HTML5] 웹 메모장 만드는 법 (저장해서 txt파일로 다운받기) (6) | 2023.05.26 |
댓글