반응형
Javascript&CSS〃웹사이트 로딩중 이미지 띄우기

Javascript&CSS〃웹사이트 로딩중 이미지 띄우기

이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다. ■ 로딩 이미지 만들기 1. http://preloaders.net/ 여러가지 로딩 이미지를 제공합니다. 2. http://www.ajaxload.info/쉽고 간단한 로딩 이미지를 만들 수 있습니다. ■ 로딩 소스 위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다. 먼저 CSS소스 다음은 SCRIPT 소스 마지막으로 HTML or JSP 안에 들어가는 소스 이정도면 이미지나 AJAX 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 ..

  • format_list_bulleted 프로그래밍/Script·JQuery
  • · 2017. 2. 2.
  • textsms
Javascript〃자바스크립트 용량 및 코드 줄이기 (BTCode)

Javascript〃자바스크립트 용량 및 코드 줄이기 (BTCode)

같은 인터넷 속도로 어느 사이트를 가보면 속도가 빠르고, 어느 사이트는 느리고 각각 다양합니다. 원인이야 다양하겠지만 그 중에 하나는 스크립트를 불러오면서 로딩 속도가 달라지기도 하는데요. 용량도 줄이고, 속도도 좀 빨라지고, 다른 사람들이 읽기 어렵게 만드는 BTCode라는 프로그램을 발견해서 저도 정리하게 됬습니다. 출처 : https://mygony.com/ 다운로드 : 이 프로그램은 자바스크립트 파일통쨰로 넣어도 되고, 각각 소스코드를 넣어 변환시킬 수 있다는게 장점인 것 같습니다. 설명서는 따로 필요없을 정도로 사용이 간단하니 생략할게요 ^^

  • format_list_bulleted 프로그래밍/Script·JQuery
  • · 2017. 1. 24.
  • textsms
Javascript〃자바스크립트로 현재시간 나타내기

Javascript〃자바스크립트로 현재시간 나타내기

사이트 제작시 현재날짜와 현재시간을 보여줄때가 있습니다. 자바에서 보여주는 방법도 있지만 이번 글에서는 가볍게 자바스크립트로 나타내는 것을 정리해 볼게요. 먼저 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..

  • format_list_bulleted 프로그래밍/Script·JQuery
  • · 2017. 1. 20.
  • textsms
게시판〃(2-3) 글쓰기 / 글삭제/ 답변 살펴보기

게시판〃(2-3) 글쓰기 / 글삭제/ 답변 살펴보기

HTML과 자바스크립트로 초기 작업을 한 게시판 글쓰기와 글삭제, 답변 파일을 마지막으로 알아보고 기능을 추가하도록 하겠습니다. 혹시 제 글을 보시면서 jsp파일이나 텍스트 문서가 필요하시면 스크롤 내려서 마지막 부분에 (2) 화면 설계 링크 글에서 받으시면 되겠어요. 일단 이 카테고리의 모든글은 제 공부 목적으로 쓰기 때문에 흐름이 꼬이더라도 링크를 타시면서 이해부탁드려요^^ ■ 게시판 글쓰기- 글쓰기 화면 (Board_Write.jsp) - - 등록을 누르면 바뀌는 화면 (Board_Write_action.jsp) - 게시판 만들기 카테고리를 통해 처음부터 보신분들이라면 이 글쓰기는 글수정하기와 HTML 코드는 완전 비슷하다고 느끼셨을거에요. 차이점이 있다면 등록버튼을 누르면 데이타 전송으로 페이지가..

  • format_list_bulleted 프로젝트/1.게시판만들기
  • · 2015. 11. 25.
  • textsms
게시판〃(2-2) 게시글 읽기 / 게시글 수정

게시판〃(2-2) 게시글 읽기 / 게시글 수정

이번에는 게시판 글을 클릭하면 읽는 화면인 글 읽기와 글을 수정하는 화면에 대해서 살펴보도록 하겠습니다. 역시 이 부분도 HTML로 화면을 꾸며야 되서 한참동안 멍때렸어요. 혹시 텍스트 파일과 jsp파일이 필요하신분은 제일 아래 (2)번 화면설계 글에서 다운받으시면 되겠습니다. ■ 게시글 읽기(Board_View.jsp) 게시판 목록보다는 덜 힘들었지만 디자인 부분은 취약하다보니 이정도에 만족합니다. 게시글 열람에 필수요소인 작성자와 작성일, 제목과 텍스트 공간을 넣었고 조회수도 추가했습니다. 여기서 버튼이 4개가 들어가 있는데 목록으로 돌아가는 기능과 수정기능, 답변기능, 삭제기능을 넣었습니다. 게시글 열람을 작성한 코드입니다. 저번글에서 나눔고딕 적용과 자바스크립트 function에 대해 언급했으니 ..

  • format_list_bulleted 프로젝트/1.게시판만들기
  • · 2015. 11. 24.
  • textsms
게시판〃(2-1) 게시판 목록 [Board_List] 살펴보기

게시판〃(2-1) 게시판 목록 [Board_List] 살펴보기

저번 글에서 단순 HTML과 자바스크립트로 뼈대를 잡아놓은 스케치 단계까지 했고, 출력되는 화면에 대해서만 포스팅했는데요. 이번 글 부터는 각각 나눠서 정리할 생각이고 먼저 메인이라고 부를만한 게시판 목록부터 살펴보도록 하겠습니다. 혹시 텍스트 파일과 jsp파일이 필요하신분은 제일 아래 (2)번 화면설계 글에서 다운받으시면 되겠습니다. ■ 게시판 목록(Board_List.jsp) 먼저 출력되는 화면이고요. HTML로 위와 같이 표를 만들기 위해 태그로 번호 / 제목 / 작성자 / 작성일 / 조회 이렇게 5칸 나누고 ,, 태그를 사용하여 구성했습니다. 이상하게 칼라 스크립터로 복사 붙여넣기하면 태그의 위치가 중앙으로 몰려서 사진형식으로 올리게 됬습니다. 바로 붙여넣기 할 수 없는 점이 정말 아쉽네요. ● ..

  • format_list_bulleted 프로젝트/1.게시판만들기
  • · 2015. 11. 24.
  • textsms
반응형