동해둘리의 IT Study

비메오 동영상을 특정 웹사이트에 포함하는 경우 보통 아래와 같이 임베드코드를 삽입하는 방식을 사용하는데요 API 를 이용하면 비메오 플레이어에 직접 접근하여플레이어를 플레이하거나 멈추거나 소리를 키우거나 특정위치로 가게하는 등의 작업이 가능합니다. 아래와 같이 기존의 iframe 임베드를 포함하여도 되고 아래와 같이 동적으로 플레이어를 생성할 수도 있습니다. 플레이어 생성후에는 각종 method 와 event 를 컨트롤 할 수 있는데요 아래 리스트가 사용가능한 method 입니다. ◦on◦off◦loadVideo◦ready◦enableTextTrack◦disableTextTrack◦pause◦play◦unload◦getAutopause◦setAutopause◦getColor◦setColor◦addCueP..

IT공부방/개발환경,오픈소스 2018. 3. 26. 19:03

윈도우 XP 의 기본폰트는 굴림체 였었는데,윈도우비스타 이후부터는 맑은고딕 폰트가 기본폰트로 적용되어 있습니다. 이, 맑은고딕 폰트를 웹페이지에 적용하는 방법을 알려드립니다 우선 아래의 폰트파일을 다운로드 한 후에, 웹사이트의 특정 폴더에 업로드 합니다. 페이지의 상단에 아래와 같이 폰트파일을 지정한후 사용하시면 됩니다 안녕하세요 맑음고딕 폰트입니다.

IT공부방/HTML5, CSS 2018. 3. 21. 16:29

jQuery 를 이용하여 barcode 를 화면에 출력하는 소스를 소개드립니다 아래 사이트에서 OpenSource로 공개하고 있구요 barcode-coder.com 아래와 같이 여러가지 타입의 바코드를 출력할 수 있구요. 아래와 같이 바코드 폭/넓이/배경색 등등을 조절할 수 있는 옵션이 주어집니다. 아래와 같이 두줄만 삽입하면 사용할 수가 있습니다. 필오한 소스코드는 아래 링크에서 다운로드 받으시면 됩니다. 아래에 예제소스를 공개합니다.

IT공부방/jQuery, ajax, java 2018. 3. 20. 10:53

블록을 짜맞추는 방식의 아주쉬운 방법으로 스마트폰용 앱을 개발할 수 있는 앱인벤터(App Inventor) 는 그 소스가 오픈되어 있는 관계로,여러 기관에서 앱인벤터를 이용한 파생툴이 많이 나오고 있는데요 기존의 앱인벤터에서 개발가능한 앱은안드로이드폰 에서만 실행가능했었죠 그런데, 아래의 사이트에서 제공하는 Thunkable 이라는 툴은 https://thunkable.com 아이폰에서도 동작한다고 합니다. 아직 자세히 살펴보지는 않았지만, 향후 참고를 위해 기록으로 남겨둡니다

IT공부방/개발환경,오픈소스 2018. 3. 19. 11:45

웹사이트 개발시 다양한 환경의 브라우저에서 테스트 하고아이폰, 넥서스, 갤럭시 등등의 다양한 기기에서의 테스트를 필요호 하는데요 이때 사용하면 좋은 툴이 있어서 소개드립니다. https://www.browseemall.com/ 위 사이트에 접속하셔서 프로그램을 다운로드 한 후 설치하게되면 아래와 같이 쉽게 다양한 브라우저 환경에서 테스트를 할 수 있습니다. 아울러 PC에서 사용되는 다양한 브라우저는 물론모바일 기기에서 접속했을 경우도 테스트 가능합니다. 다만, 이 프로그램은 유료로 제공되구요무료버전은 14일간 테스트가 가능합니다.

IT공부방/개발환경,오픈소스 2018. 3. 5. 19:24

아이폰이나 아이패드에 사용되고 있는 사파리 브라우저는 얼마전부터 MAC OS용만 다운로드를 재공하고 있는데요, 윈도우 환경에서 웹사이트를 개발하는 개발자의 경우, 아이폰이나 아이패드에서 웹사이트가 제대로 보이는지 확인할 필요가 있습니다 이를위해 윈도우용 사파리 브라우저를 다운로드 받을 수 있는 경로를 알려드립니다 제가 직접 다운로드 하여 테스트 해봤구요, 설치이외에 별다른 요구사항등이 없이 깨끗해 보입니다. 설치 후에는 아래와 같이 세팅을 변경해야 하는데요 우선 아래의 1번에 있는 기어버튼을 클릭한 후에 [기본설정] 메뉴를 클릭합니다 기본설정 팝업창에서 제일 하단의 [메뉴 막대에서 개발자용 메뉴보기] 를 선택해 줍니다 그런후에 아래 화면의 기어메뉴 좌측에 있는 문서버튼을 클릭하고, 개발자용 메뉴로 갑니다..

IT공부방/개발환경,오픈소스 2018. 3. 5. 19:12

웹사이트/홈페이지 개발시, 아이폰, 아이패드, 갤럭시 등등의 서로다른 사용자 환경에 따라 화면이 정상적으로 보여지는지 테스트 해야하는 경우가 있는데요, 크롬의 개발자모드를 이용하면 별다른 프로그램 설치없이 테스트가 가능합니다 먼저 아래화면의 1번을 클릭한 후 2번의 [도구더보기] 클릭 후 [개발자도구]를 선택합니다. 그러면, 아래와 같이 상단부분에 테스틀 할 사용자환경을 선택할 수 있는 선택바가 나타납니다. 이 부분을 iPhone7 , iPhone8 등등 원하는 환경으로 변경하면 아래와 같이 웹사이트/홈페이지의 화면이 해당기기에서 보는것 처럼 변경되게 됩니다. 개발자라면 많이들 알고계시겠지만, 혹시, 모르는 분들을 위해 기록으로 남깁니다

IT공부방/개발환경,오픈소스 2018. 3. 5. 18:29

문자셑이 서로다른 두개의 서버간에 데이터를 주고받을 경우가 생겨서 고민하던 중 utf-8 서버에서 보낸 캐릭터셋을 euc-kr 서버의 DB에 저장할때 변환하여 저장하는 방법으로 해결했습니다 간단하게 아래의 함수를 이용하면 됩니다. $data = iconv("EUC-KR", "UTF-8", $data);

IT공부방/PHP 2018. 2. 25. 19:47

카페24쇼핑몰 호스팅을 이용하여 쇼핑몰을 운영할 경우,제공되는 스마트디자인 관리툴을 이용하여 디자인수정 및 소스수정을 하게됩니다 이때, [모듈추가] 버튼을 이용하여 쇼핑몰내에서 사용되는 각종 모듈을 추가하거나 수정해서 사용하게 되는데요 아래와 같이 모듈을 추가했는데도 화면상에는 아무런 변화가 없는 경우가 있습니다. 하지만, 다른 아이디로 로그인 해서 같은 페이지를 보게되면 아래와 같이 모듈정보가 Display 되는걸 볼 수 있습니다. 스마트디자인을 이용할 경우에는 관리자 아이디로 로그인 하게 되는데, 위에서 추가한 회원정보수정모듈 ( myshop_benefit ) 모듈의 경우에는 회원정보 수정기능이 들어있는데,관리자의 회원정보수정은 관리모드에서만 가능하기 때문에 이런현상이 생기는 것입니다. 따라서, 스마..

IT공부방/퍼스트몰, 카페24 쇼핑몰 2018. 2. 25. 19:05

1. 이미지를 가운데 정렬 2. 특정 엘리먼트를 상하좌우 정렬할때3. 둥근사각형 만들때 4. 특정 DIV 를 토글시킬때 1. 이미지를 가운데 정렬 2. 특정 엘리먼트를 상하좌우 정렬할때 3. 둥근사각형 만들때 4. 특정 DIV 를 토글시킬때 function ToggleDetailSearch(){var nDetailState = document.getElementById('detailSearch').style.display; if ( nDetailState == "none" ){document.getElementById('detailSearch').style.display = 'block';}else{document.getElementById('detailSearch').style.display = 'no..

IT공부방/기타 2018. 2. 4. 12:22

360도 이미지를 볼 수있는 jQuery 소스 (VR 파노라마뷰어, 이미지뷰어) 아래 사이트에서 제공하는 소스를 활용하여 360도 이미지를 볼 수 있는 jQuery 소스를 만들어봤습니다 https://pannellum.org/ 모바일에서 가로/세로 변경 및 SCALE 변경에 따라 화면이 잘 보일 수 있도록 하는 코드도 추가했습니다

IT공부방/jQuery, ajax, java 2017. 8. 5. 14:24

CSS 속성중에서 z-index 라는 값이 있죠.... This is a heading 예를 들어, 위와 같이 코딩했을 경우, 엘리먼트가 엘리먼트보다 위에 표시되게 됩니다. 엘리먼트가 엘리먼트보다 먼저 코딩되어 있기 때문에, 정상적이라면 나중에 코딩된 엘리먼트가 위에 올라가는게 맞지만, z-index 속성을 -1 로 주었기 때문에, 이런 상황이 생기게 됩니다. 이번 포스팅에서 강조하려고 하는 것은, CSS 로 설정된 z-index 값을 javascript 를 이용하여 동적으로 변경시키는 것입니다. 이때, 흔히 하기 쉬운 실수가 바로 아래와 같이 코딩하는 것입니다. 하지만, 이렇게 하면 z-index 가 제대로 작동하지 않고 ERROR 가 발생하게 됩니다. 보통, style 속성을 변경하고자 할때 아래와 ..

IT공부방/HTML5, CSS 2017. 2. 3. 22:03

웹서핑 할 때, 어떤 브라우저를 사용하시나요? 익스플로러? 크롬? 마이크로소프트의 인터넷 익스플로러 점유율은 특히나 우리나라에서 독보적으로 1위를 차지했었는데요... 이제는 우리나라 에서도 더 이상 1위가 아닙니다. 현재 브라우저 점유율 1위는 바로 구글에서 개발한 크롬 (Chrome) 브라우저 되시겠습니다 저는, 블로그 포스팅할 때도 크롬을 많이 사용하는데요, 크롬 브라우저를 사용해서 포스팅을 하면 편리한 점이 많습니다. 사진 첨부할 때 이미지 미리 보기가 가능하고요, 방금 전에 첨부했던 폴더가 기억되어 있어서.. 매번 클릭을 몇 번씩 해야 하는 익스플로러 보다 훨씬 편하죠 암튼, 오늘 크롬 브라우저를 사용하면서 활용할 수 있는 팁 한가지 알려드립니다. 웹서핑을 할 때, 브라우저는 쿠키/이미지/사용기록..

IT공부방/개발환경,오픈소스 2017. 2. 2. 16:05

PHP 함수 중에서, 특정 디렉토리의 내용을 읽어오기 위한 함수 readdir() 1234567891011121314 Colored by Color Scriptercs 위와 같이 opendir 함수를 이용하여 $dir 에 지정된 images 폴더를 읽게되면 디렉토리를 제어할 수 있는 핸들(Directory handle) 이 반환됩니다 이 핸들을 이용하여 readdir($dh) 함수에 전달하면 디렉토리 내의 폴더와 함수를 읽어오게 됩니다. opendir() 후에는 closedir() 함수로 핸들을 잠가주게 됩니다. 위와 같이 할 경우, 폴더내의 파일명이 아래와 같이 표시되게 됩니다 filename: cat.giffilename: dog.giffilename: horse.gif linux계열의 경우 아래와 ..

IT공부방/PHP 2017. 1. 3. 23:02

javascript 로 url 에서 경로와 파일명을 분리하기 위한 코딩 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var sOriginImgUrl = "http://www.naver.com/test/study/myfilename.doc"; var arSplitUrl = sOriginImgUrl.split("/"); // "/" 로 전체 url 을 나눈다 var nArLength = arSplitUrl.length; var arFileName = arSplitUrl[nArLength-1]; // 나누어진 배열의 맨 끝이 파일명이다 var arSplitFileName = sImgUrl.split("."); // 파일명을 다시 "." 로 나누면 파일이름과 확장자로 나..

IT공부방/jQuery, ajax, java 2017. 1. 2. 23:22

1. 처음으로 발견되는 문자열 위치 찾는 함수 indexOf() javascript 코딩시에, 특정 문자열에서 원하는 문자/문자열을 찾을 때 사용하는 함수로 indexOf() 함수를 사용합니다. array.indexOf(item, start) ParameterDescriptionitemRequired. The item to search forstartOptional. Where to start the search. Negative values will start at the given position counting from the end, and search to the end. var str = "Hello world, welcome to the universe."; var n = str.indexO..

IT공부방/jQuery, ajax, java 2017. 1. 2. 21:59