오봉이와 함께하는 개발 블로그

태그 도형이나 이미지 출력 태그 예제 - canvas.html 사각형 그리기 캔버스 지우기 이미지 출력 태그 문제 - pose.html 포즈 인식 결과 확인 포즈 인식 결과를 이미지에 좌표로 표시 // $(document).ready(function(){ 축약형 $(function(){ // [결과 확인] 버튼 클릭하면 서버에서 좌표 받아서 // 이미지 출력하는 drawCanvas() 함수 호출 : 좌표, 이미지 src 전달 $('#showBtn').on('click', function() { // 서버에서 응답 결과로 좌표 값 받았다고 가정 var result = {"points": [{"x":0.42, "y":0.20}, {"x":0.49, "y":0.22}, {"x":0..

응용 예제 음성 녹음 음성 녹음 ([녹음] / [정지]) 컨트롤 출력 play 파일로 저장 WebRTC 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능 https://webrtc.org 음성 녹음 예제 - voiceRecord.html, voiceRecord.js 녹음 정지 $(document).ready(function(){ const record = document.getElementById('record'); const stop = document.getElementById('stop'); const soundClips = document.getElementById('sound-cli..

jQuery 효과 공통 인수 duration : 효과 진행 속도(slow / normal / fast) callback : 효과 완료 후 수행할 함수 easing : 전체 애니메이션(효과)의 적용 시간 비율을 원하는 진행 비율로 매핑 swing : sin곡선(느리게 시작해서 중간에 빠르게 진행되다가 나중에 다시 느려지는 효과) linear : 선형 곡선(시작부터 끝까지 일정한 속도) jQuery로 가능한 시각적 효과 Basic 효과 hide() : 요소 숨기기 show() : 요소 표시(출력) toggle() : 요소를 숨기거나 표시 (hide() / show() 교대로 실행) Sliding 효과 slideDown() : 요소를 슬라이딩 효과로 나타나게 함 slideUp() : 요소를 슬라이딩 효과로 숨..

DOM 요소의 클래스 속성 CSS 효과 동적 적용 CSS의 클래스 선택자에게 적용된 여러 효과를 동적으로 추가하거나 제거 addClass('클래스명') : CSS 효과 적용 removeClass('클래스명') : 적용된 CSS 효과 제거(해제) toggleClass('클래스명') : addClass()와 removeClass() 번갈아 실행하는 결과 DOM 요소의 클래스 속성 예제 - DOMaddClass.html 이미지에 마우스를 올려보세요. toggleClass

DOM 요소의 추가 및 삭제 attr('속성명', 값) : 속성 추가 removeAttr('속성명') : 속성 제거 DOM 요소의 추가 및 삭제 예제 - DOMattr.html DOM 요소 속성 추가 DOM 요소의 추가 및 삭제 연습문제 - DOMattrIndex.html