나의 IT Note

개인정보 마스킹 보안이 중요시 되기 때문에 이름, 계좌번호, 전화번호 등등의 개인정보에 마스킹은 필수가 되어가고 있다. 성명 마스킹 성명의 맨 앞과 맨 뒤 1자리씩 제외하고 나머지는 *로 치환된다. 이름이 외자인 경우에 성은 노출이 되고 이름은 *로 치환된다. 성이 2자인 경우에는 성과 이름 구분없이 성명의 맨 앞과 맨 뒤를 제외한 나머지가 *로 치환된다. 예시) 선우길동 → 선**동 성만 입력 또는 이름이 외자인데 이름만 입력하여 이름값이 1자리수라면 해당 이름이 그대로 노출된다. function maskName(name) { if (name.length === 1) { return name; } else if (name.length === 2) { return name.slice(0, 1) + '*'..

숫자 3자리마다 콤마(,) 찍기 숫자 3자리마다(천단위) 콤마(,)를 찍는 2가지 방법 정규식(Regular Expression) 사용 var number = 100000; var number2 = 100000.123; function addCommas(amount) { return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } console.log(addCommas(number)) //100,000 console.log(addCommas(number2)) //100,000.123 toLocaleString() 함수 사용 number.toLocaleString(locales, options) toLocaleString() 함수는 숫자를 로컬의 l..

카운트 증가 / 숫자 증가 requestAnimationFrame을 사용하여 카운트를 증가시키는 스크립트로 duration을 통해 애니메이션의 시간을 조절할 수 있다. 0 // 모든 counter 요소를 가져옵니다. var counterElements = document.querySelectorAll('.counter'); // 각각의 counter 요소에 대해 애니메이션을 적용합니다. counterElements.forEach(function(counterElement) { var countLimit = parseInt(counterElement.getAttribute('data-count'), 10); var duration = 1000; // 애니메이션 시간 (ms) var start = null;..

디지털 시계 구현 Loading... 24시간으로 구현 function updateClock() { var now = new Date(); var hours = now.getHours().toString().padStart(2, '0'); var minutes = now.getMinutes().toString().padStart(2, '0'); var seconds = now.getSeconds().toString().padStart(2, '0'); var timeString = `${hours}:${minutes}:${seconds}`; document.getElementById('clock').textContent = timeString; } // 매 초마다 시계 업데이트 setInterval(upd..

페이지 자동으로 이동하기 현재 페이지에서 다른 페이지로 별도 액션없이 자동으로 이동시키는 방법 메타태그 대기시간은 숫자로 입력을 해야 하며 0이면 바로 이동하며, 5를 입력 시 5초후 이동합니다. 스크립트 // location.href 사용 location.href="http://이동할 주소"; // location.replace 사용 location.replace('http://이동할 주소'); location.href와 replace 차이점 location.href location.replace 기능 새로운 페이지로 이동 기존 페이지를 새로운 페이지로 변경 뒤로가기 가능 불가능 형태 속성 메서드 히스토리 저장됨 저장안됨 용도 일반적인 URL이동 뒤로가기가 안되므로 보안이 필요한 페이지나 히스토리 기록..

스크린샷 캡쳐 전체화면 캡쳐 command + shift + 3 command키와 shift키를 동시에 누른 상태로 숫자 3번 키를 누른다. 모니터 우측 하단에 생성된 캡쳐 축소판을 클릭하여 편집하거나 자동저장(4~5초)이 될 때까지 기다린다. 일부 화면 캡쳐 command + shift + 4 command키와 shift키를 동시에 누른 상태로 숫자 4번키를 누른다. 십자선을 마우스로 클릭 후 드래그 하여 캡쳐할 영역을 지정 후 축소판을 클릭하여 편집하거나 자동 저장(4~5초)이 될 때까지 기다린다. 윈도우 또는 메뉴 캡쳐 command + shift + 4 + space 캡쳐할 윈도우 또는 메뉴를 화면상에 보이게 해놓는다. command키와 shift키를 동시에 누른 상태로 숫자 4번 키를 누르고 s..

말풍선 그리기 이미지를 사용하여 말풍선을 적용할 수 있지만 말풍선의 데이터에 따라 디자인이 깨지지 않으면서 반영이 되어야 하기에 css를 통해 말풍선을 그리는 게 효과적이다. 보더 컬러를 수정하여 말풍선 색상을 변경할 수 있다. 보더 값을 적절하게 변경하면 여러모양의 말풍선 꼭지점을 만들 수 있다. position 속성의 top left를 사용하여 말풍선의 꼭지점을 원하는 위치로 옮길 수 있다. 말풍선 .speech-bubble { position:relative; width:200px; padding:20px; background-color:#666; border-radius:4px; color:#fff; } .speech-bubble.left:after { content:''; position:abs..

삼각형 그리기 이미지를 사용하여 삼격형을 적용할 수 있지만 컬러나 모양이 변경되는 경우 이미지를 수정해야 하는 번거로움이 있기 때문에 css를 통해 삼격형을 그리는 게 효과적이다. 보더 컬러를 수정하여 삼격형의 색상을 변경할 수 있다. 보더 값을 적절하게 변경하면 여러모양의 삼각형을 만들 수 있다. transform 속성의 rotate를 사용하면 회전 시킬 수 있다. 정삼각형 .triangle { width: 0px; height: 0px; border-bottom: calc( 90px * 1.732 ) solid #666666; border-left: 90px solid transparent; border-right: 90px solid transparent; } 결과물 직각삼각형 .triangle {..

다음요소 찾기 JavaScript에서 기본적으로 제공하는 nextElementSibling 기능은 단순히 선택된 요소의 다음 요소만 찾아주기에 jQuery와 동일한 기능을 JavaScript로 만들어봤다. next() jQuery의 next()와 동일한 기능을 JavaScript로 구현 매개변수 selector가 제공되는 경우에는 다음 요소가 selector와 일치하는 경우에만 반환을 하며 일치하지 않는 경우에는 null 을 반환한다. function next(ele, selector) { var nextEl = ele.nextElementSibling; if (!selector || (nextEl && nextEl.matches(selector))) { return nextEl; } return nul..

VoiceOver 자막 패널 iOS 13에서는 VoiceOver의 음성정보를 시각적으로 볼 수 있는 '자막 패널' 이 추가되었다. 자막 패널은 화면의 하단에서 확인이 가능하며 '손쉬운 사용' 에서 설정이 가능하다. 설정 → 손쉬운 사용 손쉬운 사용 → VoiceOver VoiceOver → 하단에 있는 '자막 패널' On 자막이 하단에 노출