나의 IT Note

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..

반응형 사이트나 모바일에서 유튜브 등의 동영상을 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);