반응형
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
Jquery&CSS〃하루동안 팝업 열지 않기 소스

Jquery&CSS〃하루동안 팝업 열지 않기 소스

회사업무로 홈페이지를 만드는 도중 팝업을 만들 필요가 생겼습니다. 구글링과 네이버 검색을 하면 소스가 많이 나오지만... 제가 적용을 하려니 쉽게 안되는 문제도 생겨 저 나름대로 짬뽕?을 시켰더니 해결이 됬습니다. 먼저 제가 사용한 방법은 팝업을 여는 MAIN 페이지와 팝업을 열었을때 보이는 POP페이지 2개를 만들어야 합니다. 복사 붙여넣기 하시면 전혀 어렵지 않아요~ ■ 실행결과 업무중이라 회사 이름은 모자이크 처리했구요. 제가 설정한 크기대로 팝업이 잘 실행됬습니다. 아래 소스 중 CSS는 파업파일 HTML단에 각 부분마다 묻어 있어요. ■ 소스 Main.jspjQuery(document).ready(function($) { pevent(); }); function pevent(){ function..

  • format_list_bulleted 프로그래밍/Script·JQuery
  • · 2016. 12. 9.
  • textsms
게시판〃(12) AJAX로 본문 미리보기 구현

게시판〃(12) AJAX로 본문 미리보기 구현

이제 정말 정말 마지막 단계인 AJAX로 본문을 미리보는 단계만 남았습니다. 요 기능이 필요없다면 저번 글까지가 완성단계이고요. 게시판 만들기 프로젝트에 필요한 기초 이론들은 JQUERY 게시판에 글을 올렸기 때문에 참고하시거나 아래 링크를 통해 먼저 보고 오시는게 좋을것 같아요. 여기서는 간단하게 소스코드와 기능들에 대한 설명들을 할 생각입니다. ▼ 관련글 2015/12/14 - JQuery〃에이작스(AJAX) 동작원리, 설정, 비동기 요청함수2015/12/10 - 게시판만들기〃(9) Board_List.jsp 작성하기2015/12/08 - Jsp〃[EL]과 [JSTL] 한방에 정리 + Core2015/12/06 - 게시판만들기〃(6) Controller 패키지 작성 그럼 글의 순서는 보드리스트.jsp..

  • format_list_bulleted 프로젝트/1.게시판만들기
  • · 2015. 12. 15.
  • 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
HTML5〃목록 태그(ul / ol / dl )

HTML5〃목록 태그(ul / ol / dl )

텍스트와 폰트에 필요한 태그에 이어 이번에는 목록을 만드는 태그에 대해서 정리해보겠습니다. 이 목록 태그는 회원가입 프로그램을 만들때 많이 접해봤는데 여러개의 태그중에 어떤 것을 써야될지 정리할 필요가 있다고 생각했어요. ■ 목록 태그( ul / ol / dl ) 〃 CSS를 입히지 않은 ul / ol / dl 출력 모습 〃 목록태그에는 크게 3가지로 순서가 없이 리스트로 나열되는 목록, 차례대로 순서가 있는 목록, 정의를 내리고 설명을 하는 목록이 있습니다. 스타일을 꾸미는 CSS를 적용하면 다양하게 표시할 수 있어 유용하게 쓰입니다. ● : 순서가 없는 목록을 그룹으로 만듬.● : 순서가 있는 목록을 그룹으로 만듬.● : 그룹안에 들어가는 세부 항목들● : 정의를 내리는 그룹● : 정의를 내리는 목록..

  • format_list_bulleted 프로그래밍/HTML·CSS
  • · 2015. 11. 23.
  • textsms
반응형