본문 바로가기

HTML12

[HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM) 🔊 오디오 재생 let track = new Audio(); let flag = 0; // flag를 사용하여 재생 중인 오디오 있으면 정지 const playVoice = (audioSrc) =>{ track.src = audioSrc; console.log(track.paused) if(flag === 0){ flag = 1; playAudio(); }else{ flag = 0; stopAudio() } } const playAudio = () => { track.play(); track.paused = false iconAnimation("play"); } const stopAudio = () => { track.pause(); track.currentTime = 0; iconAnimation("s.. 2023. 12. 1.
[HTML]canvas 사용법 - 기본 (rect, path, arc) 1. html에 canvas 요소 작성 2. js로 canvas를 세팅 function drawMyCanvas(){ let canvas = document.getElementById("myCanvas"); // 어떤 콘텐츠를 그릴 것인가 let ctx = canvas.getContext("2d"); // 캔버스 사이즈, 배경색 등 설정 canvas.width = 500; canvas.height = 500; canvas.style.backgroundColor = "lightyellow" } 1. 사각형 메서드 ctx.strokeRect(x, y, w, h); ctx.fillRect(x, y, w, h); ctx.clearRect(x, y, w, h); See the Pen canvas - basic re.. 2023. 5. 27.
[NextJS] input type="date"을 활용한 기간 선택 NextJS와 NextUI를 사용하여 구현한 프로젝트. 실질적으로는 React(JS), HTML가 뒤섞인 코드입니다. ❗날것의 코드 주의 📆구현 기능날짜선택을 통한 기간 지정 조회 옵션 : 최근 1개월, 최근 3개월, 최근 6개월 선택가능하게 🧶고려할 점. 1. 기본값 시작일은 프로젝트 생성한 1월 1일로 가정. 종료일은 오늘(가장 최근) 날짜. 그 이후 날짜는 disable. 2. 날짜 변경 시 - 시작일은 종료일보다 전이어야함 (시작일 { setDate({ startDate: '2023-01-01', endDate: today, }); }, []); const [limitDate, setLimitDate] = useState({ minStartDate: '2023-01-01', maxStartDate.. 2023. 4. 5.
#TIL #230329 요즘 쪽대본(?)같은 업무들이 밀려들고 있습니다. (수정 된 기획을 몇 시간안에 디자인, 개발, QA까지 끝내야하는...) 급하게 하는 일 중에서도 '미쳐 생각지 못한, 그동안 사용해보지 못했던, 몰랐던 또는 변화한 코드'들이 찰나로만 스쳐가는게 아까워 메모 수준으로라도 끄적여 둬야겠다고 다짐하는 요즘입니다. 2023.03.29 (화) 1. 기본(?)을 포기하고 디자인을 잡은 사례😅 [기획, 디자인 등 요청 사항] ✅ input 숫자만 입력 가능하게 this.value = this.value.replace(/[^0-9.]/g, '') .replace(/(\..*)\./g, '$1'); // 숫자만 입력가능한 정규식 .replace(/[^0-9.]/g, '') 숫자 (0-9)과 수수점 값이 아니면 '공백'.. 2023. 3. 30.
[HTML] redirect <meta http-equiv="refresh"/>로 해결한 사례 일하면서 알게된 것들을 기록합니다. 📝 언젠간 퍼즐이 맞춰지겠죠. [HTML] a태그 link와 onclick을 통한 링크 이동 이렇게 1차 조건을 해결했지만 ✅ 또 다른 이슈가 있었으니. https://kangdanne.tistory.com?post=10101010 위와 같은 query string 형식의 url이 전달 될 때 오류가 나는 현상. 인코딩의 문제인가 싶어, 인코딩/디코딩 등 어떤 방식으로 변환하여 전달해도 소용이 없었다. Cefsharp를 통하면 query string 형식의 url은 동작되지 않는 이슈가 있다고 한다. 그래서 무엇을 전달되게 할까? 가 아닌, 어떻게 실행되게 할까?로 초점을 옮겼다. 📍과장님의 아이디어 1. C#에서 '브라우저 실행("explorer.exe") > 해당 .. 2022. 6. 15.
[HTML] a태그 link와 onclick을 통한 링크 이동 (with C#) 일하면서 알게된 것들을 기록합니다. 📝 언젠간 퍼즐이 맞춰지겠죠. ✅ 이슈 사항 유저의 로컬 PC에 설치될 런처에서 연결될 메뉴 링크들이 모두 외부 브라우저를 사용해 열려야했다. go blog 쉽지 뭐. 하고 슥슥 작업을 했으나 생각치도 못한 이슈발생🥲 우리의 런처는 PC에서 하나의 App 상태로 열리게 되는 C#으로 만들어진 프로그램이었다. 고로 이곳에서의 새 창은 "윈도우 창"이 되었다. (CefSharp) 해서 팀장님께 보고를 드리고 업무를 배정 받게 되었다. 유저의 브라우저가 열리고 해당 링크로 연결되는 것이 목표! 👇 요건 백엔드 개발자분이 작업한 것 (예시) ... 중략 ... public void OpenLink(string link) { System.Diagnostics.Process.St.. 2022. 6. 15.
video태그 - 자동 재생 autoplay에 대한 방법과 생각 페이지에 접속함과 동시에 '영상이 자동재생'되게 해달라는 요청을 받았습니다. 'autoplay넣으면 됐던거 같은데, 모바일에서는 자동재생 안됐던 것같은데?'등등의 기억을 더듬어 코드를 수정! 했으나 실패하여 0부터 다시 다 찾아봐야만했던 슬픈 이야기. [처음 전달 받았던 코드의 ux flow] 1. 재생 버튼을 클릭하면 2. 영상이 담긴 레이어 팝업이 뜨면서 3. 해당 영상이 자동 재생된다. [요청 사항] 1. 페이지 접속 시 메인화면 상단의 영상 자동 재생 2. 영상의 소리도 재생 [결론] 1. 자동 재생 시킴 2. 구글 정책 설명 후 소리 muted로 타협 1. 자동 재생 되지 않은 사례 https://developer.chrome.com/blog/autoplay/ Autoplay policy in .. 2022. 3. 15.
[clone project]Danstagram - js (Main page) 첫 클론 프로젝트 Danstagram★ [메인 페이지 - 필수 구현사항] 댓글 작성 후 '엔터키'를 누르거나, '게시'를 클릭하면 댓글 추가 ✔️ 세 번째 버전 (Refactoring 후) - 소요시간 약 2.5h "use strict"; const postComment = document.getElementById('post'); const inputComment = document.getElementById('newComment'); const btnComment = document.getElementById('btnPost'); // 새 코멘트 값 체크 function checkComment(){ if(inputComment.value.length > 0){ addComment(inputCommen.. 2021. 9. 13.