소개
이 프로젝트는 간단한 이미지 자르기 도구를 만드는 과정을 안내합니다. 이 프로젝트를 완료하면 사용자가 이미지를 업로드, 표시 및 자를 수 있는 대화형 애플리케이션을 갖게 됩니다.
👀 미리보기
🎯 작업
이 프로젝트에서는 다음을 배우게 됩니다.
- 이미지 자르기 도구의 HTML 구조를 만드는 방법
- CSS 를 사용하여 웹 페이지의 스타일을 지정하여 시각적으로 매력적으로 만드는 방법
- 사용자 상호 작용을 처리하기 위해 JavaScript 를 사용하여 변수 및 이벤트 리스너를 초기화하는 방법
- JavaScript 의 FileReader API 를 사용하여 이미지 업로드 및 표시를 처리하는 방법
- JavaScript 의 Canvas API 를 사용하여 자르기 메커니즘을 구현하는 방법
- 잘린 이미지를 저장하고 결과를 표시하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- HTML 태그 및 구조 이해
- CSS 속성 및 선택자를 효과적으로 적용
- JavaScript 구문, 변수 및 이벤트 리스너 활용
- 파일 업로드를 처리하기 위해 JavaScript 에서 FileReader API 활용
- JavaScript 의 Canvas API 를 사용하여 이미지 조작 구현
