본문 바로가기
HTML/CSS

[HTML/CSS]간단한 메모장 만들기

by teamnova 2023. 11. 16.
728x90

안녕하세요 이번시간에는 메모를 저장하고 확인할 수 있는 간단한 메모장 앱을 만들어보겠습니다.
이 튜토리얼을 통해 기본적인 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 = '';
    }
});