나의 IT Note

이전요소 찾기 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