안녕하세요 이번시간에는 메모를 저장하고 확인할 수 있는 간단한 메모장 앱을 만들어보겠습니다.
이 튜토리얼을 통해 기본적인 DOM 조작 방법과 이벤트 리스너 사용 방법을 알아볼 수 있습니다.
먼저 폴더 구조는 다음과같습니다.
/memo-app
index.html
css/
styles.css
js/
script.js
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Memo App</title>
<!-- 메모장의 스타일시트를 연결합니다. -->
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- 메모장 앱의 전체 컨테이너입니다. -->
<div class="memo-app">
<!-- 사용자가 메모를 입력할 수 있는 textarea입니다. -->
<textarea id="memo-input"></textarea>
<!-- 메모를 저장하기 위한 버튼입니다. -->
<button id="save-memo">Save Memo</button>
<!-- 저장된 메모들이 출력되는 영역입니다. -->
<div id="memo-list"></div>
</div>
<!-- 메모장의 로직을 처리하기 위한 자바스크립트 파일을 연결합니다. -->
<script src="js/script.js"></script>
</body>
</html>[css/styles.css]
/* 기본 텍스트 스타일 및 배경색을 설정합니다. */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
/* 메모장 앱의 전체 스타일을 설정합니다. */
.memo-app {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
/* 사용자가 메모를 입력할 수 있는 textarea의 스타일을 설정합니다. */
#memo-input {
width: 300px;
height: 100px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
/* "Save Memo" 버튼의 스타일을 설정합니다. */
button {
display: block;
background-color: #4caf50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
/* 저장된 메모들의 출력 영역 스타일을 설정합니다. */
#memo-list {
margin-top: 20px;
}[js/script.js]
// "Save Memo" 버튼에 클릭 이벤트 리스너를 추가합니다.
document.getElementById('save-memo').addEventListener('click', function () {
// 메모 입력 영역의 요소와 내용을 가져옵니다.
const memoInput = document.getElementById('memo-input');
// 메모를 출력할 영역의 요소를 가져옵니다.
const memoList = document.getElementById('memo-list');
// 입력된 메모의 내용이 비어있지 않은 경우 실행합니다.
if (memoInput.value.trim() !== "") {
// 새로운 div 요소를 생성하여 메모 내용을 저장합니다.
const memoDiv = document.createElement('div');
memoDiv.className = 'memo';
memoDiv.textContent = memoInput.value;
// 메모를 출력 영역에 추가합니다.
memoList.appendChild(memoDiv);
// 메모 입력 영역의 내용을 초기화합니다.
memoInput.value = '';
}
});
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 (0) | 2023.12.01 |
|---|---|
| [HTML/CSS]카드 컴포넌트 캐러셀 구현 (0) | 2023.11.26 |
| [HTML/CSS]TailwindCSS 카드 컴포넌트 만들기 (0) | 2023.11.07 |
| [HTML/CSS] Tailwind로 Mac Terminal 만들기 (0) | 2023.11.05 |
| [HTML/CSS] 다양한 hover effect를 가진 버튼 만들기 (2) | 2023.10.30 |
