동해둘리의 IT Study

javascript실행순서, 애니메이션 실행순서 javascript 는 코딩된 라인 순서대로 실행되는게 원칙이지만, 간혹, 앞서 기입한 명령이나 함수의 실행이 끝나기도 전에 다음 번 라인이 실행되는 경우가 있습니다. 아래 코드를 실행시키면, $("p").hide(1000); 이 라인이 실행된 후에 alert("숨기기 완료"); 이 라인이 실행되는 순서로 되어있지만, 실제로는 $("p").hide(1000); 의 실행이 시작되자 마자 alert() 함수가 실행되게 됩니다. 마치, 윈도우에서 여러 프로그램을 실행시킬때 쓰레드를 사용하는것 처럼, javascript 도 여러줄의 명령이 실행되는 경우 실행되는 순서는 지키지만 앞선 라인의 실행이 끝난는지는 상관하지 않게됩니다. 숨기기 동해물과 백두산이 예를들어,..

IT공부방/jQuery, ajax, java 2019. 8. 5. 17:22

화면에 보이는거와 달리 내 맘대로 출력을 변환한다? 화면에 보여지는 웹사이트의 내용을 출력하기위해서 사용자가 인쇄버튼을 클릭한 경우에, 특정한 처리를 해야할 필요가 있는 경우가 있습니다. 사용자는 화면에 보이는 내용을 출력하기위해 인쇄버튼을 클릭했지만, 화면 그대로 출력하게 되면 대부분 한 페이지를 벗어나거나 프레임간의 간섭등의 오류가 생기기 쉽습니다. 그래서, 사용자가 인쇄버튼을 클릭했을때, 특정 프레임 또는 특정 DIV 의 내용만 출력하고 싶거나, 인쇄될 내용을 특정 형식에 맞게 변환하고 싶은경우에 사용할 수 있는 이벤트가 있습니다. 이벤트 발생시 화면내용을 특정 DIV 내용으로 변환하여 출력시키기 위와 같이 onbeforeprint 이벤트를 사용하면 사용자가 출력을 시도할때 이벤트를 잡아낼 수 있습..

IT공부방/jQuery, ajax, java 2019. 7. 31. 16:20

php에서 파일열기 / 쓰기/ 닫기 관련된 함수를 정리해 봅니다 php에서 파일을 열때는 readFile() 이라는 함수도 있기는 하지만 fopen() 함수가 가장 좋은 방법입니다 1 2 3 4 5 6 7 8 9 Colored by Color Scripter cs fopen() 으로 파일을 열고 fread() 함수로 파일을 읽고, fclose() 함수로 열었던 파일을 닫습니다. fopen() 함수는 두개의 인자를 설정할 수 있는데요, 첫번째 인자는 파일이름, 두번째 인자는 파일을 여는 방법을 지정하는 인자입니다. 인자구분 설명 r 파일을 읽기전용 모드로 엽니다 w 파일을 쓰기전용 모드로 엽니다 (기존 파일의 내용은 모두 삭제됩니다) a 파일을 쓰기전용 모드로 엽니다 (기존 파일의 내용이 유지됩니다) 파일..

IT공부방/PHP 2019. 7. 28. 17:33

HTML 문서가 로딩된 후에 배경음악이 자동으로 재생되게 하는 경우가 있습니다만, 2018년 1월부터 구글이 크롬브라우저에서 음악이나 영상이 자동재생 되지 않게하는 정책을 시행하게되면서 문제가 발생했습니다 예전에는 audio 태그의 autoplay 옵션을 true로 하면 자동재생이 되었지만, 최신 크롬브라우저에서는 더 이상 자동재생되지 않습니다. 이렇게 된 이유는, 무분별한 광고때문이라고 합니다. 무작위 광고와 자동재생 미디어 때문에 사용자환경이 안좋아 지게 되기 때문이라고 하는데요, 저의 경우는 온라인 학습(LMS)관련 프로젝트를 진행하고 있는데, 자동재생이 되지 않아서 각 차시별로 매번 클릭을 해야만 재생이 되는 문제가 있었습니다. 자동재생이 되는 경우는 다음과 같은 경우로 제한되고 말았습니다. 1...

IT공부방/HTML5, CSS 2019. 7. 18. 13:40

php 문자열 나누기 함수가 예전에는 split() 함수를 이용했었는데, 최근에 작업하면서 split함수를 써보니 동작을 안하더라구요, 그래서 검색해 봤더니 기존에 사용하던 split() 함수는 PHP5.3 버전에서는 DEPRECATED 되었고, 7.0 버전에서는 아에 삭제되었다고 합니다. 위 그림처럼 예전에는 split() 함수가 있었구요, 아래 그림처럼 변경이 되었습니다 php5.3 이후버전 에서는 preg_split() 함수와 explode(), str_split() 함수를 이용하여 문자열나누기를 합니다 preg_split() 함수는 정규표현식(regular expression) 을 이용하여 문자열을 분리하는 함수이구요 explode() 함수는 기존의 split()함수와 동일하다고 보시면 됩니다 s..

IT공부방/PHP 2019. 7. 16. 19:05

HTML Canvas 에 있는 이미지, 자막, 애니메이션 등의 움직임이 있는 요소를 동영상으로 변환, 저장, 스트리밍 할 수 있는 방법을 찾던 중에, 괜찮은 솔루션이 있어서 참고용으로 기록을 남깁니다 저의 경우는 위와 같이 사용자가 원하는 패턴으로 침실을 꾸며보는 프로젝트를 진행하고 있는데요, 그 결과물이 canvas 상에서 이루어 집니다. 그 과정을 영상으로 변환, 저장 할 필요가 있어서 솔루션을 찾고 있었는데, 위 내용과 같이 Firefox 에서 캔버스 안의 내용을 영상 스트림으로 변환하는 기능을 제공한다는 걸 알게되었습니다. HTMLCanvasElement.captureStream() 위 함수가 그런 기능을 제공한다고 합니다. 아울러 유튜브에서도 API 를 통해 같은 기능을 구현할 수 있다고 합니다..

IT공부방/HTML5, CSS 2019. 7. 6. 08:14

블로그/ 웹사이트 등에 특정 웹사이트를 링크하는 경우, 아래와 같이 자동으로 사이트 정보가 노출되는 것을 볼 수 있습니다. 위와 같이 사이트정보가 표시되게 하기 위해서는 HTML 문서내에 몇가지 코드를 넣어주어야 하는데요, 웹표준에 따라 HTML 코드를 넣어주면 됩니다. 위 코드는 웹사이트 정보를 수집하는 각종 검색엔진의 로봇을 허용할지를 명시하는 코드입니다. index 는 검색엔진의 로봇검색을 허용할지를 정하는 키워드로 noindex 로 설정하게 되면 로봇 검색을 허용하지 않는다는 뜻힙니다 follow 는 웹사이트 내에 기록된 링크를 허용할 지를 지정하는 키워드 인데요, 마찬가지로 nofollow 로 설정하게 되면, 페이지내에 있는 url 을 로봇이 수집하지 못하게 합니다. 페이지 제목 위 코드는 페이..

IT공부방/HTML5, CSS 2019. 7. 5. 09:05

웹사이트 또는 모바일 서비스를 개발시 지도를 표시하는 경우가 있는데요, 보통 네이버지도 또는 다음지도 API 서비스를 이용하여 아래와 같이 개발하게 됩니다. 그런데, 다음지도 서비스가 2018년 11월경에 중지되었고, 지금은 카카오에서 지도서비스를 제공하고 있습니다. 아울러 kakao지도 로 변경된 이후 일정 쿼터를 넘기게 되면 유료로 변경되어 비용이 지급해야 합니다. 네이버지도 또한 아래와 같이 쿼터제한을 두고 있습니다. 일반적인 웹사이트는 걱정할 필요가 없을 정도로 쿼터제한이 넉넉하긴 합니다만, 대량 접속을 유발하는 서비스의 경우는 비용을 지급해야 겠지요 이번 포스팅에서는 카카오지도 API 를 이용하여 웹사이트에 원하는 지도를 넣는 방법을 설명하도록 하겠습니다. kakao지도 를 이용하기 위해서는 카..

IT공부방/개발환경,오픈소스 2019. 7. 3. 08:08

동해둘리가 직접 개발했던 실전 프로젝트를 살펴보는 동해둘리의 실전프로젝트 2탄 지난 포스팅에서 html5 에서 제공하는 canvas를 이용하여 이미지를 합성하거나 이미지를 겹치는 방법을 살펴봤었습니다. 앱스토어에서 메리퀸 으로 검색하면 앱을 다운로드 받아서 실제 기능을 확인해 보실 수 있습니다 이번 포스팅에서는, 지난번에 이어서 실제 코드를 살펴보면서 html5 canvas를 이용한 이미지합성 / 이미지겹치기 에 대해 알아보도록 하겠습니다 우선, 위 그림의 침대부분이 canvas 입니다. 그리고 이미지를 합성하기 위한 보이지 않는 hidden 속성의 canvas 가 두개 필요합니다. 캔버스를 지원하지 않는 브라우저 입니다 캔버스를 지원하지 않는 브라우저 입니다 캔버스의 css 설정은 다음과 같습니다. 폭..

IT공부방/HTML5, CSS 2019. 7. 2. 10:27

게시판을 만들때 네이버 스마트데이터를 이용하는 경우가 많은데요, 아래 그림과 같이 글꼴이나 굵기 색상등을 편집하기 좋고 무료로 제공되기 때문에 사용하기 편리합니다 다만, 스마트에디터의 사진추가를 이용할 경우, 문제가 발생할 수 있습니다. 스마트에디터를 설치한 후에 사진을 첨부해보면, 기본적으로 myPhoto 폴더로 사진이 업로드 되게 됩니다. 이는, nse_files/quick_photo_uploader/popup/ 폴더에 있는 FileUploader_html5.php 파일에 아래와 같이 경로가 명기되어 있습니다. $newPath = $_SERVER['DOCUMENT_ROOT'].'/nse/myPhoto/'.iconv("utf-8", "cp949", $file->name); 이미 업로드된 파일과 동일한 ..

IT공부방/개발환경,오픈소스 2019. 6. 25. 13:38

게시판에서 글 내용을 검색할 때, 검색결과 중에서 입력된 검색어에 해당되는 부분만 색상을 다르게 표현하는 코드입니다. 간단하지만 기록용으로 남겨놓습니다. // 검색창에 입력된 검색어 $search_key = $_REQUEST['search_key ']; // 검색어가 포함된 memo 를 읽어온다 $sBoardQuery = "SELECT memo FROM board WHERE memo like '%". $search_key ."%'"; $rBoardResult = mysqli_query($dbconn, $sBoardQuery); $total_board_record = mysqli_affected_rows($dbconn); for ($BoardLoop = 0; $BoardLoop

IT공부방/PHP 2019. 6. 25. 09:14

파워포인트 (ppt) 기능중에서 모든 페이지에 미리 설정한 이미지나 텍스트가 나타나게 할 수 있는 기능이 슬라이드 마스터 인데요, 작업하다보면 표지나 간지 부분에는 마스터가 필요없는 경우가 있습니다 위의 그림에서 첫번째 페이지를 목차로 사용하고 싶은데, 마스터가 적용되어 있엇 문제가 됩니다. 이럴경우 쉽게 해결이 가능합니다 위의 그림과 같이 페이지 위에서 오른쪽 마우스 클릭을 한 후, 배경서식을 클릭합니다 오른쪽에 있는 배경서식 메뉴중에서 [배경그래픽숨기기] 를 클릭하면 바로 마스터가 사라지게됩니다 위와같이 다른 페이지에는 모두 마스터가 보이지만, 1번페이지에서는 안보이게 됩니다.

IT공부방/기타 2019. 6. 18. 10:55

웹사이트를 개발할때, 이미지로딩/ 동영상로딩 등이 완료된 이후에 특정 함수를 실행해야 하는 경우가 있습니다. 이때, 사용할 수 있는 이벤트가 document.ready / window.load 가 있는데요, 두개는 비슷한 동작을 하지만, 엄격히 다른 기준에 따라 실행이 됩니다. document.ready 먼저, document.ready 는 페이지내의 모든 DOM 요소들이 로딩되었을때 실행이 됩니다. 즉, 페이지 내에 img 태그가 있을경우, img 태그 객체가 로딩되면 document.ready 가 실행된다는 겁니다. 위와같이 아주 큰 사이즈의 이미지를 img 태그에 명기한 후에 페이지를 로딩하면, verybigsizeImage.jpg 가 로딩되지 않아도 document.ready 함수는 실행되게 됩니..

IT공부방/jQuery, ajax, java 2019. 6. 14. 15:06

html5 canvas를 이용하여 이미지를 합성하거나 겹치기 source-over / source-atop 침대에 DP된 이불/베개/패드 등의 패턴을 내 맘대로 바꿀수 있게하자 최근에 작업하게된 프로젝트 중에서 아래 그림과 같이 침대에 DP되어 있는 이불/베개/패드 등의 각각의 요소를 원하는 패턴으로 만들어 볼 수 있는 즉, 패턴이미지를 합성할 수 있는 작업을 진행하게 되었습니다 위와 같이 흰색으로 구성된 침구세트의 각 부분을 원하는 패턴이미지로 바꾸어 보면서 원하는 디자인을 찾을 수 있게 해주는 프로젝트 였습니다. 해당프로젝트는 양모침구 전문브랜드 메리퀸에서 의뢰받은 프로젝트로서 앱으로도 개발하여 현재 구글플레이스토어와 애플 앱스토어에 등록되어 있습니다 구글플레이스토어와 애플 앱스토어에 등록되어 있습니..

IT공부방/HTML5, CSS 2019. 6. 11. 09:57

파비콘 만들기 / favicon 만들기 / faviconl.ico 웹사이트를 개발하다보면 크롬 개발자모드 화면의 콘솔에 다음과 같은 코드가 보이는 경우가 있습니다. 파비콘이라는 것은 바로가기 버튼/ 홈화면에 링크추가/ 브라우저 상단에 타이틀이 표시되는 부분등에 나타나는 일종의 아이콘이라고 보시면 됩니다. 브라우저에서 페이지를 열었을때 타이틀이 표시되는 부분 옆에 보면 작은 아이콘처럼 파비콘이 표시되는 걸 볼 수 있습니다. 또는, 모바일 화면에서 바로가기를 만들었을때 화면에 보이는 아이콘도 파비콘입니다. 파비콘 favicon 은 PNG 파일을 만든 후에 ico 형식의 파일로 변환이 가능합니다. PNG 파일은 일러스트나 포토샵 등에서 만들 수가 있는데요, 크기는 16x16 / 32x32 / 48x48 / 6..

IT공부방/그래픽,포토샵,합성,3D 2019. 6. 4. 15:12

모바일 브라우저에서 HTML 문서를 로딩하게되면 아래와 같이 상단부분에 주소표시줄이 계속 남이있는 경우가 많습니다. 화면을 스크롤해서 올려봐도 스마트폰 최 상단의 상태바는 없어지지 않는 경우가 많습니다 게임을 하거나 동영상을 플레이하거나, 인강등의 교육컨텐츠 등을 보여줄때는 전체화면을 다 사용해야 가독성에서도 그렇고 인터페이스 측면에서도 더 좋은 효과를 얻을 수 있습니다. jquery 와 javascript/CSS 등을 이용하면 모바일 전체화면을 다 사용할 수 있습니다 최초에 페이지에 접속을 하면 아래와 같이 보여지게 됩니다. 이 상태에서 스마트폰을 가로로 회전을 시키면 아래와 같이 보여지게 됩니다. 세로모드 또는 가로모드에서 [가로모드로 고정하기] 버튼을 클릭하게 되면 아래와 같이 화면을 100% 꽉 ..

IT공부방/jQuery, ajax, java 2019. 5. 29. 08:10