나의 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 자막이 하단에 노출

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

:not() 특정 selector을 제외하고 스타일을 적용하고 싶은 경우 사용 CSS .parents p:not(.fisrt) { background-color: green; color: #fff; } .parents span:not(.fourth) { background-color: gray; color: #fff; } .parents .fifth :not(p) { font-style: italic; text-decoration: underline; } p:not(.fisrt) p 요소 중에 first 클래스를 가지고 있지 않는 요소 선택 span:not(.fourth) span 요소 중에 fourth를 가지고 있지 않는 요소 선택 .fifth :not(p) fifth 클래스를 가진 요소의 자식들 중에..

readonly 설정 input의 경우 아래와 같이 readonly를 간단하게 처리할 수 있다. 그러나 checkbox나 radio버튼은 readonly속성이 적용되지 않는다. 그래서 onclick을 직접 적용하여 readonly을 설정하거나 스크립트로 설정을 해주어야 한다. 예시 1 input에 return false를 적용 // checkbox // radio 예시 2 input에 return false를 스크립트로 일괄 적용 // checkbox // radio let ipt = document.querySelectorAll('input.readonly'); for(let i = 0; i < ipt.length; i++) { ipt[i].setAttribute('onclick', 'return fa..

:first-child 지정 요소가 형제 요소 중 제일 첫 요소인 경우 다른 말로 부모의 자식 요소 중 첫 번째 자식을 선택 CSS .parents p:first-child { background-color: green; color: #fff; } .parents > p:first-child { text-decoration: underline; font-style: italic; } 아래의 예시에서 부모는 .parents가 된다. p:first-child 부모의 자식 요소(=형제 요소) 중 첫 번째 요소가 p(지정 요소)인 경우에 스타일을 적용한다. HTML 1. 첫번째 p요소 2. 두번째 p요소 3. 첫번째 div 요소 3-1. div 내부의 첫번째 p요소 결과 1. 첫번째 p요소 2. 두번째 p요소 ..

반응형 사이트나 모바일에서 유튜브 등의 동영상을 iframe으로 삽입할 경우 제공되는 소스를 그대로 넣으면 사이트가 어긋난다. 유튜브에서는 반응형을 지원하지 않기에 css로 처리를 해야한다. 동영상의 width는 100%, height는 0으로 설정하여 화면에서 보여지지 않게 한 후에 padding값을 조절하여 모바일 어느 기기에서도 width, height 둘 다 100%로 보여지게 한다. HTML CSS 화면의 비율에 따라 padding값을 다르게 줘야한다. 대부분이 56.25%이다. 화면 비율 21:9 일경우 9/21 = 0.42857140.4285714285714286‬% 16:9 일경우 9/16 = 0.5625% 4:3 일경우 3/4 = 0.75% .video-container { positio..

resize 이벤트는 브라우저가 resize가 되는 동안 계속 실행이 되기 때문에 성능면에서 좋지 않다. 그래서 setTimeout과 clearTime을 사용으로 resize가 완료된 이후 한번만 실행을 하게 할 수 있다. let resizeTimer = null; function resizeComplete() { // 리사이즈 함수 사용 console.log('resize Complete'); } window.addEventListener('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeComplete, 400); }, false);

전화번호 스팸 등록 및 복구 지겹게 오는 스팸문자들… 매번 스팸 등록을 해도 또 다른 번호로 오지만 난 끝까지 전부 스팸 등록을 진행한다. 아래는 스팸등록하는 방법이다. 스팸 등록하기 사진에 있는 노란색 네모 부분만 확인해가며 그대로 따라 하면 스팸 등록이 완료된다. 스팸문자 화면에서 디바이스 상단 중앙에 있는 사람 모양 아이콘 터치 정보 터치 이 발신자 차단 하단에서 올라오는 화면의 연락처 차단 이 발신자 차단 해제가 나오면 스팸등록이 완료 스팸 등록된 전화번호 복구 스팸을 잘못 등록하거나 해지를 해야 하는 경우 아래와 같이 진행을 하면 된다. 설정 화면에서 아래로 스크롤 하여 메시지 터치 아래로 스크롤 하여 차단된 연락처 터치 차단된 연락처에서 차단 해제할 연락처를 찾아서 터치 새로운 연락처 등록 또..

:only-child 지정 요소가 부모의 유일한 자식 요소인 경우 다르게 말해서 부모의 자식 요소가 지정 요소 하나만 있는 경우에 적용이 된다. :only-of-type 지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우 부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없다. CSS .parents div:only-child { background-color: green; color: #fff; } .parents p:only-child { background-color: gray; color: #fff; } .parents p:only-of-type { text-decoration: underline; font-style: italic; } HTML 1. parents의 자식이 오직 하..

:nth-child() 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다. 문법(Syntax) :nth-child(n) nth-of-type() 같은 타입의 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다. 문법(Syntax) :nth-of-type(n) 키워드(n) odd 형제 요소중에 홀수번째인 요소 선택(1, 3, 5, 7, …) even 형제 요소중에 짝수번째인 요소 선택(2, 4, 6, 8, …) An + B A와 B는 정수의 입력값(B는 선택), n은 0부터 시작하는 양의 정수가 적용되어 A x n + B로 계산한 값이 대입된다. 예시(A에 3, B에 1을 대입한 3n + 1) A 3 x(곱하기) n 0 1 2 3 4 ... +(더하기) B 1 결과 1 4 7..

String.length 문자열의 길이를 반환하는 속성(property)이다. 문법(Syntax) String.length 숫자 타입의 경우 undefined를 반환한다. 공백도 길이에 포함된다. let str = 'hello world'; let blank = ' '; // 공백 3칸 let num = 123; str.length; // 11 blank.length; // 3 num.length; // undedined