자바스크립트(JavaScript)에서 특정 클래스가 있는 경우에 실행되도록 스크립트를 만들고 싶은 경우에 참고해보세요. 자바스크립트: 클래스가 있는지 체크하기 예를 들어, mobile 클래스가 존재하는 경우에 팝업을 표시하는 경우를 생각해볼 수 있습니다. 그러면 다음과 같은 스크립트를 사용할 수 있습니다. var isMobileVersion = document.getElementsByClassName('mobile'); if (isMobileVersion.length > 0) { // elements with class "mobile" exist } getElementsByClassName는 배열과 유사한 개체(array-like object)인 NodeList를 반환한다고 합니다. 그 길이를 체크하여 ..

자바스크립트를 사용하여 숫자 천 단위마다 콤마를 찍는 방법 중 하나입니다. 다양한 방법이 있으므로 상황에 맞는 스크립트를 선택하여 사용하시면 될 것 같습니다. 자바스크립트: 숫자 천 단위마다 콤마를 찍는 방법 정수에 천 단위마다 콤마를 넣는 JavaScript 함수: 예시: function thousands_separators(num) { var num_parts = num.toString().split("."); num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); return num_parts.join("."); } console.log(thousands_separators(1000)); console.log(thousands_sepa..

화면 크기가 달라져도 이미지의 가로 크기와 세로 길이가 동일하게 유지되도록 하고 싶은 CSS나 자바스크립트로 시도해볼 수 있습니다. 이미지가 가로 세로 비율이 동일하게 유지하고 싶은 경우 아래의 방법을 테스트해보시기 바랍니다. CSS를 사용하여 이미지 종횡비 (Aspect Ratio) 유지하기 이미지 크기가 변해도 종횡비 (예: 4:3, 16:9)를 유지하고 싶은 경우, 혹은 가로 세로 크기를 동일하게 유지하고 싶은 경우 W3Schools 문서를 참고해보시기 바랍니다. How To - Aspect Ratio / Height Equal to Width How TO - Aspect Ratio Learn how to maintain the aspect ratio of an element with CSS. As..

화면을 스크롤할 때 상단 메뉴를 고정하고 싶은 경우가 있습니다. 이 경우 구글을 검색하면 다양한 자료를 찾을 수 있습니다. 자바스크립트를 사용하여 화면을 아래로 스크롤할 때 상단 메뉴를 고정하기 이 티스토리 블로그에는 최근 공개된 Book Club (북 클럽) 이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 화면을 아래로 스크롤할 때 메뉴가 상단에 고정되지 않습니다. 현재 이 블로그에서는 w3schools.com에서 제공하는 코드를 사용하여 화면을 아래로 스크롤할 때 메뉴를 고정하도록 만들었습니다. 스킨의 제약 때문에 조금 엉성하지만 개인용 블로그이기 때문에 그냥 사용해도 무방할 것 같습니다. 소스는 다음 문서에 나와 있습니다. (업데이트: 이 글을 작성한 이후에 스킨을 고래스킨으로 변경했습니다. ..

자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용] jQuery를 사용하면 쉽게 DIV의 위치를 변경할 수 있습니다. jQuery 대신 자바스크립트를 사용하고 싶은 경우 다음 Statckoverflow 글을 참고할 수 있습니다. Change div order in CSS or javascript (CSS 또는 자바스크립트로 Div 순서 변경) 예시: var content = document.getElementById('FeaturedContent'); var parent = content.parentNode; parent.insertBefore(content, parent.firstChild); DIV에 ID가 지정된 경우 위와 같이 document.getElementById를 사용하면 됩..

홈페이지에 팝업을 표시하려는 경우 CSS나 자바스크립트/jQuery를 이용한 다양한 팝업 플러그인을 구글에서 검색할 수 있습니다. 간단한 모달 팝업의 경우 다음 W3Schoools 문서에서 제시하는 방법을 이용할 수 있습니다. How To Create a Modal Box (모달 박스 만드는 방법) 제시된 코드를 사용하면 다음과 같은 모달 팝업을 띄울 수 있습니다. CSS로만 팝업을 띄우고 싶다면 다음 글을 참고해보시기 바랍니다. [CSS] 텍스트를 클릭하면 div가 팝업으로 표시되도록 하는 방법 이외에 구글을 검색해보면 다양한 무료 팝업 플러그인을 찾을 수 있습니다. 무료 팝업으로 디자인적인 측면이나 기능적인 측면의 완성도를 높이는 데 어려움을 겪는 경우 Codecanyon에서 판매하는 플러그인을 활용..

웹페이지 내의 특정 div 내의 콘텐츠만을 인쇄하고 싶은 경우가 있습니다. 그런 경우 stackoverflow에 나와 있는 코드를 참고할 수 있습니다. 예시) HTML This is a sample text for printing purpose. Do not print. JavaScriptfunction printDiv() { var divToPrint=document.getElementById('DivIdToPrint'); var newWin=window.open('','Print-Window'); newWin.document.open(); newWin.document.write(''+divToPrint.innerHTML+''); newWin.document.close(); setTimeout(func..

인터넷을 돌아다니다 보면 위의 그림과 같이 메뉴를 클릭했을 때 특수한 형식으로 표시되는 메뉴를 만나곤 합니다. 이런 형식의 메뉴를 메가 메뉴(Mega Menu)라고 합니다. 워드프레스의 경우 아바다, 뉴스페이퍼 같은 일부 테마에서 메가 메뉴 기능을 제공하고 있습니다. 워드프레스 아바다 테마에서 메가 메뉴 사용하기 Elegant Themes의 Divi에서 메가 메뉴 만들기 HTML에서 메가 메뉴를 구현하고 싶은 경우 다음 W3Schools 자료를 참고할 수 있습니다. How TO - Mega Menu (메가 메뉴를 만드는 방법) 반응형까지 고려하여 제대로 만들려면 제법 시간이 걸릴 것 같습니다. 직접 만들기에는 시간이 너무 소요되고 결과물도 시원찮은 경우 코드캐년 마켓에서 판매하는 스크립트를 활용해볼 수 ..

페이지가 로드될 때 텍스트 입력란에 마우스 커서가 위치시키고 싶을 때가 있습니다. 자바스크립트를 사용하여 페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키기 예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(UX)를 향상시킬 수 있을 것입니다. 이 경우 여러 가지 방법을 이용할 수 있습니다. 먼저 input 필드에 autofocus를 추가하면 간편합니다. 하지만 일부 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 다음과 같은 자바스크립트(Javascript)를 사용할 수 있습니다. window.onload = function() { var input = document.getElementB..

언젠가 자바스크립트(Javascript)를 제대로 배워보겠다는 생각을 가지고 있지만 실천을 하지 못하고 있습니다. 필요한 내용만 그때그때 검색으로 해결하다 보니 기본적인 원리를 제대로 이해하지 못하고 있습니다. 오래 전에 구입한 책이 책장에 그대로 있네요. (동영상 강의도 하나 구입했는데... 언제 볼 수 있을지 모르겠습니다.) 인사이드 자바스크립트 - 기본적인 원리 설명에 중점을 둔 자스책 하코사 카페를 보니 많은 분들이 '인사이드 자바스크립트'라는 책을 추천하고 보고 있네요. 2019년 새해를 맞이하여 자바스크립트를 제대로 시작해보자라는 생각을 가지고 이 책을 쿠팡에서 주문하여 어제 받았습니다. 인사이드 자바스크립트 Inside JavaScript : 핵심 개념과 원리를 정확하게. jQuery Nod..