본문 바로가기
728x90

dansoon-Dev10

[Javascript] File Upload Drag&Drop 웹사이트에 파일을 업로드하는 것은 많은 웹 애플리케이션의 일반적인 요구 사항입니다. 사용자가 이 프로세스를 더 쉽게 수행할 수 있는 한 가지 방법은 파일 업로드를 위한 끌어서 놓기 인터페이스를 제공하는 것입니다. JavaScript로 파일 업로드 끌어서 놓기 인터페이스를 만드는 방법을 살펴보겠습니다. 1단계: HTML File Input 만들기 만들기의 첫 번째 단계 끌어서 놓기 파일 업로드 인터페이스는 HTML File Input 을 만드는 것입니다. 이 요소를 사용하면 사용자가 기존 파일 선택 대화 상자를 사용하여 컴퓨터에서 파일을 선택할 수 있습니다. Drag & Drop 인터페이스를 사용할 수 없는 사용자를 위해 이 요소를 대안으로 사용할 것입니다. 2단계: 드롭 영역 요소 생성 다음으로, 드롭 .. 2023. 2. 27.
[html] 반응형 이미지로 웹사이트 로딩 시간 개선하기 점점 더 많은 사람들이 서로 다른 기기에서 인터넷에 액세스함에 따라 웹사이트를 다양한 환경에 맞게 최적화하는 것이 중요합니다. 화면 크기. 이 최적화의 한 가지 중요한 측면은 반응형 이미지를 사용하는 것입니다. 반응형 이미지가 무엇인지, 왜 중요한지, 웹사이트에서 어떻게 구현할 수 있는지 살펴보겠습니다. 반응형 이미지란? 반응형 이미지 이미지를 보는 데 사용되는 장치의 화면 크기와 해상도에 맞게 조정되는 이미지입니다. 사용자가 데스크톱 컴퓨터, 태블릿 또는 휴대폰을 사용하는지 여부에 관계없이 가능한 최상의 보기 환경에 최적화되어 있습니다. 반응형 이미지를 사용하여 웹사이트는 로드 시간을 개선하고 대역폭 사용량을 줄이며 모든 장치에서 콘텐츠가 멋지게 보이도록 할 수 있습니다. 최신 웹사이트에서 반응형 이미.. 2023. 2. 24.
추천하는 완전 무료 웹 템플릿 사이트 Bootstrap Themes : https://bootstrapthemes.co/items/free-bootstrap-templates/ 다양한 무료 템플릿 제공 포트폴리오, 블로그, 랜딩 페이지, 전자상거래 등과 같은 다양한 범주와 함께 작동하도록 설계 템플릿은 다음을 수행할 수 있습니다. 개인 및 상업적 용도로 사용 W3Layouts: https://w3layouts.com/ 다양한 무료 웹사이트 템플릿 제공 템플릿은 반응형이며 다양한 유형의 웹사이트에 사용할 수 있습니다. 기업, 포트폴리오, 블로그, 전자상거래, 랜딩 페이지 등과 같은 범주를 포함하는 대규모 템플릿 컬렉션 템플릿은 개인 및 상업적 용도로 사용할 수 있습니다. HTML5 UP: https://html5up.net/ 개인 및 상업적 .. 2023. 2. 16.
[Javascript] 클릭시 ImageDownload 버튼이나 이미지 클릭시 이미지를 다운받는 Script 입니다. 검색해보면 기본적으로 a tag 에 download attribute 를 이용해서 또는 또는 쉽게 사용 할 경우 이렇게 사용해도 되지만 문제는 이러한 코드들의 경우 ie 나 크롬 브라우저들은 작동하는데 OS X 의 Safari 브라우저에서 작동하지 않았어요.... 그래서 아이폰이나 Safari에서도 작동하는 script 를 검색하다가 검색하다가 github 에서 주웠습니다. [a tag] [script] 이건 되네요. 이 글이 수고를 덜어드렸으면 좋겠네요. [참고] https://github.com/photopea/photopea/issues/1166 2023. 2. 15.
728x90