동해둘리의 IT Study

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

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

로딩이미지는 대량의 데이터를 보여줄때 많이 사용하게 되는데요, 지난 시간에는 AJAX 통신할때 loading 문구를 보여주는 걸 알아봤습니다만, 이번에는 HTML 문서내에 데이터가 많을경우에 사용할 수 있는 간단한 로딩 이미지 보여주는 방법을 알려드립니다 페이지가 로딩될때 위와같은 로딩 이미지를 보여주고자 할 경우, 다음과 같이 사용하시면 됩니다 Loading ... 일단, 위와 같이 로딩 이미지를 태그내에 위치시키고 아이디를 loading_image 라구 명명합니다 그리고, 페이지 하단부분에 아래와 같이 코드를 넣어주면 됩니다 이렇게 하면, 페이지 로딩이 모두 완료된 이후에 로딩바가 사라지게됩니다 document.all.loadingBar.style.display='none';

IT공부방/HTML5, CSS 2019. 2. 28. 15:15

HTMl5 로 코딩을 하는경우, 동적으로 화면의 요소들을 컨트롤 해야하는 경우가 많습니다. 팝업형태의 DIV 태그를 사황에 따라 보여준다거나 많은 리스트를 보여주지만, 사용자의 선택에 따라 일부분만 보여주어야 하는 경우 동적으로 HTMl 요소들을 컨트롤 해야합니다. 이럴때 흔히 사용하는 Style Property 가 바로 display와 visibility 입니다. display 는 none 이나 block, inline 등의 값을 사요할 수 있고 visibility 는 hidden, visible 값을 사용하게됩니다. 하지만, 이 두가지 property는 중요한 차이점이 있습니다. 위 그림에서 보는바와 같이, display 를 사용하는 경우 B 를 display:none 으로 처리했다면, B 가 안보이..

IT공부방/HTML5, CSS 2018. 11. 8. 23:52

DIV 태그를 사용할때, DIV 태그 내의 엘리먼트를 가운데 정렬하는 방법입니다. 안녕하세요 위와 같이 margin:0 auto; 속성을 세팅하게되면, 자신을 둘러싸고 있는 DIV 엘리먼트의 중간에 정렬이 됩니다.

IT공부방/HTML5, CSS 2016. 9. 15. 10:47

HTML5 에서 제공되는 Audio 태그의 함수및 속성값에 대해 알아보겠습니다 w3schools.com 에서 검색해보면 아래와 같이 속성이 몇개 없습니다 하지만 위 속성 이외에도 제어관련된 속성이 몇가지 더 있는데요, 다음과 같습니다. currentTime : 현재 재생중인 위치의 시간값defaultPlaybackRate : 기본 재생 속도playbackRate : 현재 재생 속도volume : 볼륨 사용할 수 있는 함수는 다음과 같다 load() : 지정된 소스를 로드한다(음악/영상)canPlayType() : 재생 가능한지 확인한다play() : 오디오/비디오를 재생한다pause() : 오디오/비디오를 멈춘다 이때, reload() 함수는 제공되지 않는데, Reload 를 하려면 해당 객체의 src ..

IT공부방/HTML5, CSS 2016. 9. 11. 17:54

Audio 엘리먼트의 play 후에, 재생이 종료되었을 때의 이벤트는 onended 이벤트 입니다. 코드내에서 직접 사용할 때에는 아래와 같이 사용하면 됩니다 이벤트 리스너를 이용하여 사용할 때에는 다음과 같이 사용하면 됩니다 function UserFunction(){alert("music ended");} var obTarget = document.getElementById("audio_id");obTarget .addEventListener("ended", function(){ UserFunction(); }); 저의 경우는 코드내에서 사용할때는 onended 이기 때문에 이벤트리스너를 이용할때도 아래와 같이 코딩하는 실수를 자주 범하는 편이라서, 여러분들은 혼동하지 마시기 바랍니다. obTarge..

IT공부방/HTML5, CSS 2016. 9. 9. 14:12

1. 브라우저에 로드되는 페이지의 랜더링 시에, 해당 브라우저의 최신 엔진을 이용하여 랜더링 하라는 코드이다.지정된 doctype에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링 최신의 브라우저에서 웹표준을 지키지 않던 브라우저(IE5,6,7 등)를 기준으로 제작된 웹페이지를 방문하게 되면 레이아웃이 깨지거나 작동하지 않을 때가 있습니다. 그래서 meta태그를 사용해서 렌더링 엔진을 선택하게 하거나, 최신 렌더링 모드로 강제로 작동하게 만들어야 합니다. 그 때 사용하는 태그가 태그 입니다. [출처] X-UA-Compatible, IE=edge|작성자 하얀향기[출처] X-UA-Compatible, IE=edge|작성자 하얀향기 * content 값에 지정할 수 있는 값 IE=5 관용모드(qu..

IT공부방/HTML5, CSS 2016. 7. 13. 11:59