개발자의 끄적끄적

[html/css] css input disabled example / css input 비활성화 색상 설정하는 방법 css 에서 input 박스에 disabled 를 추가했을 경우 박스 안의 색상을 설정하고 싶은 경우가 있습니다. 사용자가 비활성화 상태인지 쉽게 구분하게 하기 위해서 색상에 차이를 두곤 하는데요! 그럴때는 해당 페이지에 로드되는 css 파일에 아래 내용을 추가하거나 해당 페이지에 아래 css 를 텍스트로 추가하시면 됩니다. input:disabled { background: #F0F0F0; } 참고들 하세요!

[html/css] html img tag 변경된 이미지 바로 반영시키는 방법 html 에서 이미지를 다루다 보면 서버에 동일한 파일명으로 이미지 파일을 변경하는 경우가 있습니다. 그럴때 대부분 일정시간이 지나면 캐싱이 초기화되서 정상적으로 반영되지만, 바로 반영을 시켜야 하는 경우가 있습니다. 그럴때는 아래와 같이 하시면 됩니다. 우선 아래와 같이 img 태그가 있다고 가정하고, 서버에 갱신된 같은 파일명의 이미지 파일을 반영하고 싶으면 아래와 같이 파일 src 뒤에 ?v=1 즉, 파라미터를 붙여주시면 됩니다! 참고들 하세요!

[javascript/jquery] javacsript control video event options example / 자바스크립트 비디오 컨트롤 가능한 옵션들 사이트 [링크] html 에서 video 를 다루다 보면 제어할 수 있는 옵션에 대한 궁금증이 생기게 됩니다. 그럴때 제어할수 있는 항목들을 테스트 버전으로 만들어 놔서 확인이 가능한 사이트가 있어서 공유해보려고 합니다. 들어가서 몇가지 테스트해보시면 금방 아실껍니다! 참고들 하세요! html video options example site : https://www.w3.org/2010/05/video/mediaevents.html HTML5 Video HTML5 Video Events and API This page demonstrates ..

[javascript/jquery] html video canplaythrough event example / html 비디오 태그 재생가능상태 확인하는 방법 html 에서 audio / video 태그를 사용하여 영상 또는 음성 파일을 재생하고자 할때 용량이 크면 로드되는 시간이 걸려서 재생이 가능한 상태인지 확인해야 하는 경우가 있습니다. 그럴때는 아래와 같이 canplaytorough 이벤트를 사용하시면 됩니다. video.addEventListener('canplaythrough', () => { video.play(); }); 위 내용 보시면 아시겠지만, 위 이벤트가 호출되는 시점은, 영상 또는 음성파일이 중단없이 실행이 가능한 상태가 되었다고 판단될때 호출됩니다! 참고들 하세요!

[html/css] html img tag onclick example / html 이미지 태그 확대해서 보는 방법 html 에서 이미지를 확대해서 보게 해야 하는 경우가 있습니다. 그럴때는 여러가지 방법이 있겠지만, 아래처럼 이미지를 클릭해서 새창으로 띄우게 하면 확대가 가능합니다. 바로 아래처럼 onclick 옵션을 이용하는 건데요. onclick="window.open(this.src)" 위와 같이 onclick 옵션을 아래와 같이 img 태그에 추가하시면 됩니다. 결과는 아래와 같이 onclick 가 추가되면 됩니다. 참고들 하세요!

[html/css] html meta viewport example / html 이미지 확대 막는 방법 html 에서 특정 사이트는 이미지 확대가 안되게 막혀있는 경우가 있습니다. 바로 meta 태그중 viewport 라는 값 때문인데요, 이번에는 이미지 확대를 막는 방법을 공유해보겠습니다. 아래와 같이 meta viewport 를 하나 작성합니다. 그리고 위 meta tag 에 아래 나와있는 내용을 추가합니다. user-scalable=no 정상적으로 추가가 되면 아래와 같이 meta 태그가 작성되어 있어야 합니다! 그리고 새로고침 후 다시 확인해 보시면 확대가 안되는것을 확인할 수 있습니다! 참고들 하세요!

[html/css] css 문자열 ... 처리하는 방법 html 에서 특정 div 같은 영역에 적혀있는 텍스트가 많아서 영역을 벗어나서 표기되거나 하는 경우가 있습니다. 그럴때는 영역을 벗어나는 데이터는 ... 으로 표기하고 싶을수도 있는데요. 해당영역에 아래와 같이 스타일을 추가해주시면 됩니다! text-overflow:ellipsis;white-space:nowrap;overflow:hidden; 참고들 하세요!

[javascript/jquery] call iframe javascript function example / iframe 내 함수 호출하는 방법 html 에서 iframe 을 이용하다 보면 iframe 안에 선언되어 있는 자바스크립트 함수를 호출해야 하는 경우가 종종 있습니다. 그럴때는 아래와 같이 하시면 바로 호출이 됩니다! 예를들어, 아래와 같이 test 라는 아이디를 가지는 iframe이 있다고 가정하고, 위 iframe 안에 test_function 라는 함수가 있다고 가정하고, 그 함수를 호출하고 싶으면, 아래와 같이 하시면 됩니다! var frm = document.getElementById("test"); frm.contentWindow.test_function(); 참고들 하세요!