반응형
반응형
이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다. ■ 로딩 이미지 만들기 1. http://preloaders.net/ 여러가지 로딩 이미지를 제공합니다. 2. http://www.ajaxload.info/쉽고 간단한 로딩 이미지를 만들 수 있습니다. ■ 로딩 소스 위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다. 먼저 CSS소스 다음은 SCRIPT 소스 마지막으로 HTML or JSP 안에 들어가는 소스 이정도면 이미지나 AJAX 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 ..
같은 인터넷 속도로 어느 사이트를 가보면 속도가 빠르고, 어느 사이트는 느리고 각각 다양합니다. 원인이야 다양하겠지만 그 중에 하나는 스크립트를 불러오면서 로딩 속도가 달라지기도 하는데요. 용량도 줄이고, 속도도 좀 빨라지고, 다른 사람들이 읽기 어렵게 만드는 BTCode라는 프로그램을 발견해서 저도 정리하게 됬습니다. 출처 : https://mygony.com/ 다운로드 : 이 프로그램은 자바스크립트 파일통쨰로 넣어도 되고, 각각 소스코드를 넣어 변환시킬 수 있다는게 장점인 것 같습니다. 설명서는 따로 필요없을 정도로 사용이 간단하니 생략할게요 ^^
홈페이지나 웹사이트를 만들게 되면 메인화면에 팝업창을 띄우게 될 경우가 생기죠? 팝업 띄우는 방법은 여러가지 있는 걸로 알고 있습니다. DIV로 팝업 띄우는 것도 이쁘긴 한데 각 사이트 성격마다 어울리는 것을 써야겠죠~!!! 그래서 저는 자바스크립트로 팝업창을 띄워봤습니다. 실행결과를 올리고 싶지만 회사 사이트라 소스만 정리합니다. ■ MAIN 페이지 jQuery(document).ready(function($) { pevent(); }); function pevent(){ function getCookie(name){ var nameOfCookie = name + "="; var x = 0; while (x
사이트 제작시 현재날짜와 현재시간을 보여줄때가 있습니다. 자바에서 보여주는 방법도 있지만 이번 글에서는 가볍게 자바스크립트로 나타내는 것을 정리해 볼게요. 먼저 View를 나타내는 Html or Jsp에서는 div 스타일로 id명을 입력해줍니다. 조회시간 : 다음 사이에 아래와 같이 입력합니다. var msg={ label_date_format_yymmdd_hhmmss:'yyyy년 MM월 dd일 a/p hh시 mm분 ss초', }; Date.prototype.format = function(f) { if (!this.valueOf()) return " "; var weekName = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; var d = this; ret..
회사업무로 홈페이지를 만드는 도중 팝업을 만들 필요가 생겼습니다. 구글링과 네이버 검색을 하면 소스가 많이 나오지만... 제가 적용을 하려니 쉽게 안되는 문제도 생겨 저 나름대로 짬뽕?을 시켰더니 해결이 됬습니다. 먼저 제가 사용한 방법은 팝업을 여는 MAIN 페이지와 팝업을 열었을때 보이는 POP페이지 2개를 만들어야 합니다. 복사 붙여넣기 하시면 전혀 어렵지 않아요~ ■ 실행결과 업무중이라 회사 이름은 모자이크 처리했구요. 제가 설정한 크기대로 팝업이 잘 실행됬습니다. 아래 소스 중 CSS는 파업파일 HTML단에 각 부분마다 묻어 있어요. ■ 소스 Main.jspjQuery(document).ready(function($) { pevent(); }); function pevent(){ function..
Asynchronous JavaScript And XML의 약자인 에이작스는 번역하면 비동기적 자바스크립트와 XML의 뜻을 가지고 있습니다. 새로운 언어는 아니고 기존에 사용하고 있는 HTML, CSS, JavaScript, XML등의 언어를 편리하게 사용하기 위해 만들어진 기술이라 생각하면 될 것 같아요. 에이작스를 사용하게 된 이유는 웹브라우저와 서버의 데이타 전송을 조각방식으로 나눠 전체 페이지를 리로드하지 않아도 되지 않아도 되는 유용성 때문인데요. 그 이유는 기존 XML이 데이타를 교환할때 전체 페이지를 모두 전송했기에 대역폭 낭비가 심했기 때문입니다. ■ AJAX의 동작구조 1. 웹 브라우저의 인터페이스에서 자바스크립트 함수를 호출시킵니다.2. XMLHttpRequest 객체의 인스턴스를 생성..