김 양의 멋따라 개발따기

1. html 코드  2. JavaScript 코드 function touchInit(targetElement) { zoomStatus = true; let startX = 0, startY = 0; let offsetX = 0, offsetY = 0; let scale = 1; // 초기 스케일 let isDragging = false; let initialDistance = 0; let touchCenterX = 0, touchCenterY = 0; // 터치 중심점 const maxScale = 2; // 최대 확대 배율 설정 // 기준값 설정 const baseTranslateX = 270; const baseT..

1. 문제 상황A 화면과 B화면을 연동해서 A화면 이벤트 발생할 경우를 감지해 B화면에서 이벤트를 발생시켜야 했습니다.처음에는 childWindow를 이용했으나 부모 윈도우에서 다른 페이지 이동시 소통이 끊어지는 이슈가 발생했습니다.2. 해결 방법Broadcast Channel API를 활용해서 연결하면 다른 페이지로 이동할 경우에도 상관없이 연결이 지속됩니다.const bc = new BroadcastChannel("test_channel"); //채널 연결bc.postMessage("This is a test message."); // 메시지 전송bc.postMessage({ // 딕셔너리 형태도 전송 가능 dog : "rive"});bc.onmessage = (event) => { /..

1. 문제 상황한글로 입력을 받아도 영문으로 변환해야 하는 상황이었습니다.글자 하나하나씩 치환해서 바꿔주는 방법으로 해결했습니다.더 좋은 방법이 있다면 공유 부탁드립니다! 2. 코드HTML 코드 변환 JavaScript 코드

1. HTML 코드 2. CSS 코드 .carouselContainer { width: 1080px; height: 1440px; overflow-x: hidden; overflow-y: hidden; margin: auto; } .carouselContainer > .carousel { display: flex; transform: translate3d(0, 0, 0); transition: transform 0.2s; } .carousel_item { width: 1080px; height: 1440px; } .carousel_item > img { width: 1080px; height: 1440px; object-fit: contain; } 3. JavaScript 코드 /**이미지 다음으로 넘기..

1. 원래는 javascript로 구현하고자 했으나 아쉽게도 아직 모바일 키보드를 감지하는 이벤트는 없었습니다. 2. 키보드가 나오면 뷰포트크기가 줄어드는 이벤트를 이용했습니다. // 처음 시작시 화면의 사이즈 값을 가진다. const originalSize = jQuery(window).width() + jQuery(window).height(); // 창의 사이즈 변화가 일어났을 경우 실행된다. jQuery(window).resize(function() { // 처음 사이즈와 현재 사이즈가 변경된 경우 // 키보드가 올라온 경우 if(jQuery(window).width() + jQuery(window).height() != originalSize) { alert("키보드가 올라왔습니다.") } //..

1. 문제상황 animation 1 번과 2번이 있고 1번이 종료된 뒤 setTimeout 없이 2번 이벤트를 실행시키고 싶었음. 2. 문제해결 animation이 끝났음을 감지하는 animationend 이벤트를 사용 //애니메이션 끝날 때를 감지 web_menu_button.addEventListener("animationend", ()=>{ //첫번째 애니메이션 삭제 web_menu_button.classList.remove("fadeInUp-animation"); //두번째 애니메이션 추가 web_menu_button.classList.add("animation"); })

1. 마우스 우클릭 방지하기 /**우클릭 방지 */ document.addEventListener("contextmenu", function(event) { event.preventDefault(); }, false); 2. 확대 축소 방지 /**확대 축소 방지 */ document.body.addEventListener('touchstart', function(e) { if ( (e.touches.length > 1) || e.targetTouches.length > 1) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); } }, {passive: false}); 3. 텍스트를 길게 눌러 선택, 복사 이벤트 방지 // 텍스..

1. 문제상황 javascript 로 클론코딩을 하던 중 jquery의 slideup, slidedown이 등장함 css animaion과는 조금 다른 이벤트라 정확하게 클론하고 싶었음. 2. 문제 해결(코드) //HTML 토글 이 내용을 숨기거나 보이게 할 것입니다. //CSS .target { overflow: hidden; transition: height 0.3s ease; /* 애니메이션 효과를 부드럽게 만듭니다. */ } //Javascript const toggleButton = document.getElementById('toggleButton'); const targetElement = document.getElementById('targetElement'); let isHidden = ..

1. html 코드 2. css 코드 /* Add slide animation class */ .slide-container { overflow: hidden; position: relative; width: 100%; height: 100%; } .img-container { position: relative; overflow: hidden; width: 300px; height: 200px; } .image { width: 100%; height: 100%; transition: transform 0.3s ease; /* transform 속성에 대한 0.3초의 부드러운 애니메이션 효과 추가 */ } 3. javascript 코드 function updateTransform(event) { if(zo..

//다운로드 받고 싶은 부분 Save