3.구현/HTML5&Javascript 썸네일형 리스트형 [HTML5] 드래그 앤 드롭(drag and drop) 들어가기 HTML5에서 드래그앤드롭 기능에 대해서 알아보자. 먼저 테스트위한 기본 구성을 하고 실제 코드를 작성할 예정이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 기본 구성 먼저 기본적인 화면 구성 및 CSS 내용이다. HTML 바디 Drag Me 스타일 .foo { width: 100px; height: 100px; background-color: aquamarine; } .bar { /* width: 100px; */ /* height: 100px; */ cursor: grab; background-color: blueviolet; text-align: center; } .dropzone { width: 200px; height: 200px; .. 더보기 [Javascript] Worker와 Notification 들어가기 Worker은 javascript에서 백그라운드로 돌아가는 프로세스같은 역활을 한다. Worker 객체를 만들어서 사용하며 백그라운드로 실행될 자바스크립트를 별도로 작성해야 한다. 그리고 Worker 객체와는 메시지를 통해서 데이터를 주고 받을 수 있다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 화면 간단하게 입력받을 화면을 작성한다. Send Log: Worker Log 출력을 할 함수를 작성한다. function log(msg) { var span = document.createElement('div'); span.innerText = msg; logger.appendChild(span); } Worker 객체를 생성해보자... 더보기 날씨 바람 v2.0 이전 날씨 바람(https://ospace.tistory.com/858) 업그레드 버전이다. 시간 변환을 추가했고, 간단한 컨트롤도 추가했다. 표시시간은 실제 날씨 시간은 아니고 재생시간이다. * 2024/03/05 Chrome의 CORS 정책 강화로 이미지 처리 오류로 실시간에서 2023/09/05일 날씨정보 일부로 수정. 더보기 [canvas] 라운드형 수직 바 그래프 그리기 canvas를 사용해서 간단하게 라운드형 바 그래프를 그려보겠다. 작성자: 작성자: ospace114@empal.com, http://ospace.tistory.com/ drawRoundedBarV 함수 라운드형 수직 바를 그리는 함수이다. 인자는 다음과 같다. ctx: 2D Context 객체 x: 바가 시작하는 x 좌표 y: 바의 y 좌표로 높이에 해당 radius: 캡의 지름 isDown: 캡의 방향(true: 아래로 볼록, false: 위로 볼록) function drawRoundedBarV(ctx, x, y, diameter, isDown) { y = isDown ? y : -y; const radius = diameter / 2; ctx.beginPath(); ctx.moveTo(x, 0); .. 더보기 날씨 바람 nullschool의 earth을 참고해서 한번 만들어봤다. 데이터는 기상청에 있는 데이터를 가져왔다. 지도 정보가 정확한 정보가 없어서 대충 눈대중으로 맞췄다. ㅡ.ㅡ 2020.07.11 정보 생성을 위도경도 기준으로 생성하고 최대한 지도에 맞췄다. 그래도 조금 어긋나네. https://earth.nullschool.net/ https://www.weather.go.kr/wgis-nuri/html/map.html 더보기 [dat.gui] dat.gui를 사용한 간단한 설정 관리 dat.gui 자바스크립트로 간단한 설정을 관리할 수 있는 UI 라이브러리을 제공한다. 임시 테스트용으로 사용하기 최적이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 테스트를 위한 설정 정보를 변경하거나 데모를 위한 설정을 변경할 경우 매번 값을 수정해서 실행하기 쉽지가 않다. dat.gui를 사용하면 간단한 설정정보를 관리할 수 UI을 제공하고 변경사항을 적용할 수 있는 인터페이스를 제공하고 있다. 여기서는 바로 dat.gui을 사용하는 방법을 살펴보려고 한다. CDN 먼저 CDN에서 사용할 javascript 파일을 추가한다. 물론 파일로 저장해서 사용할 수 있다. 초기화 data.GUI 객체를 새로 생성하고 기본 설정값을 정의해보자. s.. 더보기 [webrtc] Janus API 활용 들어가기 Janus을 사용하면 분석하고 활용했던 API을 정리해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 메시지 규약 janus에 메소드는 GET과 POST 형식을 사용한다. GET: 이벤트 및 메시지 long polling POST: 핸들 생성, 세션 조작 모든 요청 메시지의 body에는 두가지 필드가 필수이다. janus: 요청이나 이벤트 (ex. create, attache, message, etc.) transaction: 클라이언트가 서버에서 응답 메시지 확인에 사용 오류가 발생할 경우 응답 메시지 필드이다. janus: "error" 에러 메시지 표시 transaction: 실패한 요청 트랜잭션 식별자 error: 에러 내용 code.. 더보기 [HTML] 간단한 로딩화면 스피너 만들기 들어가기 페이지 로딩하거나 작업을 처리할 때에 화면에 표시되는 스피너를 의외로 많이 사용하게 된다. 이를 통해 사용자 입력과 접근을 제한하여 안정적으로 서비스를 동작하기 위한 목적이 있기 때문에 중요한 기능이라고도 볼 수 있다. 아주 간단하게 스피너를 동작하기 위한 내용으로 별게 없다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ CSS 먼저 CSS를 작성해보자. 단순한 애니메이션 효과까지 포함되어 있다. .layerPopup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify.. 더보기 이전 1 2 3 4 5 6 다음
