📝 포스트잇 스타일 메모 관리 소개

📝 포스트잇 스타일 메모 관리 소개

안녕하세요! 오늘은 포스트잇처럼 간편하게 메모를 관리할 수 있는 웹페이지를 소개하고자 합니다. 일상생활에서 자주 사용하는 포스트잇의 느낌을 웹페이지로 구현해봤습니다.

🎯 이 웹페이지의 특징

이 메모 관리 페이지는 포스트잇 스타일로 디자인되어 있어, 마치 실제 포스트잇을 붙여놓은 것처럼 친근하고 직관적인 느낌을 줍니다. 또한 BASIC DIARY 테마를 적용하여 일기장 같은 따뜻한 분위기를 연출했습니다.

✨ 주요 기능

• ✓ 카테고리 지정 - 일상, 업무, 공부, 쇼핑, 여행, 기타 등 6가지 카테고리
• ✓ 카테고리별 메모 보기 - 필터 버튼으로 원하는 카테고리만 선택하여 보기
• ✓ 메모 작성 - 제목과 내용을 입력하여 새로운 메모 추가
• ✓ 메모 수정 - 각 메모의 수정 버튼으로 내용 변경
• ✓ 메모 삭제 - 더 이상 필요 없는 메모 삭제
• ✓ 메모 순서 변경 - 드래그 앤 드롭으로 메모 순서 자유롭게 변경
• ✓ 메모 상단 고정 - 중요한 메모를 상단에 고정하여 항상 보이게 하기
• ✓ 15개 샘플 메모 - 다양한 카테고리의 예제 메모 포함
• ✓ 로컬 저장 - 브라우저에 자동 저장되어 데이터 유지
• ✓ 반응형 디자인 - 모바일, 태블릿, PC 모든 기기에서 사용 가능

🎨 디자인 특징

이 웹페이지는 포스트잇 스타일과 BASIC DIARY 컨셉을 결합하여 제작되었습니다:

• 포스트잇 느낌 - 노란색 배경과 그림자 효과로 실제 포스트잇처럼 표현
• 호버 효과 - 마우스를 올리면 살짝 회전하며 입체감 있는 효과
• 고정 메모 강조 - 고정된 메모는 다른 색상과 고정 아이콘으로 표시
• 크림색 배경 - 따뜻하고 부드러운 크림색과 베이지 톤
• 노트북 줄 패턴 - 왼쪽에 세로 줄이 있어 노트북 느낌
• 심플한 디자인 - 과하지 않은 미니멀한 스타일

포스트잇 스타일의 메모들이 그리드로 배치된 전체 화면

💻 사용 방법

1. 메모 추가하기

상단의 입력창에 메모 제목과 내용을 입력하고, 카테고리를 선택한 후 "메모 추가하기" 버튼을 클릭하면 됩니다.

2. 카테고리별 필터링

상단의 필터 버튼(전체/일상/업무/공부/쇼핑/여행/기타)을 클릭하여 원하는 카테고리의 메모만 볼 수 있습니다.

3. 메모 고정하기

각 메모에 마우스를 올리면 나타나는 "고정" 버튼을 클릭하면 해당 메모가 상단에 고정됩니다. 고정된 메모는 다른 색상으로 표시되고 항상 맨 위에 위치합니다.

4. 메모 순서 변경하기

메모를 마우스로 드래그하여 원하는 위치로 이동시킬 수 있습니다. 드래그 앤 드롭으로 메모의 순서를 자유롭게 변경할 수 있어 정리가 편리합니다.

5. 메모 수정 및 삭제하기

각 메모에 마우스를 올리면 "수정"과 "삭제" 버튼이 나타납니다. 수정 버튼을 클릭하면 모달 창이 열려 메모의 제목, 내용, 카테고리를 변경할 수 있습니다.

📊 카테고리별 활용 예시

카테고리별 추천 사용법

• 일상 - 일상적인 할 일, 약속, 개인 일정 등
• 업무 - 회의 준비사항, 프로젝트 일정, 업무 메모 등
• 공부 - 공부 계획, 암기할 내용, 학습 노트 등
• 쇼핑 - 장보기 목록, 구매할 물건 리스트 등
• 여행 - 여행 계획, 체크리스트, 여행 메모 등
• 기타 - 기타 다양한 메모

🎯 샘플 메모 (15개)

웹페이지에는 다음과 같은 샘플 메모 15개가 포함되어 있습니다:

포함된 샘플 메모:
• 쇼핑: 마트 장보기
• 업무: 프로젝트 마감일 (고정), 회의 준비사항 (고정)
• 공부: 영어 단어 암기, 책 읽기 목록, 온라인 강의 수강
• 일상: 친구 생일 선물, 운동 루틴, 병원 예약, 독서 모임 준비
• 여행: 제주도 여행 계획, 부산 여행 체크리스트
• 기타: 포트폴리오 정리

📊 기술 스택

이 웹페이지는 순수 HTML, CSS, JavaScript로 제작되었습니다:

사용 기술:
• HTML5
• CSS3 (Flexbox, Grid, Transform)
• Vanilla JavaScript
• HTML5 Drag and Drop API
• LocalStorage API (데이터 저장)

별도의 라이브러리나 프레임워크 없이 순수 웹 기술만으로 구현되어 있어, 어떤 환경에서도 쉽게 실행할 수 있습니다. 특히 드래그 앤 드롭 기능은 HTML5의 네이티브 API를 활용하여 구현했습니다.

🚀 활용 방법

이 메모 관리 웹페이지는 다음과 같이 활용하실 수 있습니다:

• 일상 관리 - 매일의 할 일과 약속을 카테고리별로 정리
• 업무 메모 - 회의 내용, 프로젝트 일정, 중요한 업무 사항 기록
• 학습 노트 - 공부 계획, 암기할 내용, 학습 메모 정리
• 쇼핑 리스트 - 장보기 목록, 구매할 물건 체크리스트
• 여행 계획 - 여행 일정, 체크리스트, 여행 메모
• 아이디어 저장 - 떠오른 아이디어나 생각을 즉시 기록

💡 활용 팁

• 중요한 메모는 "고정" 기능을 활용하여 항상 상단에 표시
• 카테고리별로 메모를 분류하여 체계적으로 관리
• 드래그 앤 드롭으로 자주 보는 메모를 위로 올리기
• 완료된 메모는 삭제하여 화면을 깔끔하게 유지

🎁 파일 받기

📧 이메일을 댓글로 남겨주시면

메모 관리 웹페이지 파일을
이메일로 보내드리겠습니다!

댓글에 이메일 주소를 남겨주시면, 파일을 첨부하여 보내드립니다.
개인정보 보호를 위해 댓글은 비공개로 설정하셔도 됩니다.

💡 참고사항: 파일은 단일 HTML 파일로 구성되어 있어, 다운로드 받으신 후 바로 브라우저에서 열어 사용하실 수 있습니다. 별도의 설치나 설정이 필요하지 않으며, 모든 데이터는 브라우저에 자동 저장됩니다!

💡 마무리

포스트잇처럼 간편하고 직관적인 메모 관리가 필요하셨다면, 이 웹페이지가 도움이 되실 것입니다. 카테고리별로 정리하고, 드래그 앤 드롭으로 순서를 변경하며, 중요한 메모는 고정하여 효율적으로 메모를 관리해보세요.

궁금한 점이나 개선 사항이 있으시면 언제든 댓글로 남겨주세요. 그리고 파일이 필요하시다면 댓글로 이메일 주소를 남겨주시면 보내드리겠습니다!

#메모관리 #포스트잇 #웹페이지 #HTML #JavaScript #드래그앤드롭