본문으로 바로가기

IT & 기타/자바스크립트

해당되는 글 19
  • thumbnail
    IT & 기타/자바스크립트 (2)

    [Javascript] 자바스크립트로 Select 옵션 재설정/변경하기

    셀렉트(Select) 박스의 옵션을 재설정하고 싶은 경우 자바스크립트나 jQuery를 사용하여 옵션값을 변경할 수 있습니다. 이 글에서는 자바스크립트와 jQuery를 사용하여 Select 옵션값을 변경하는 방법에 대해 살펴보고, 예시를 통해 이를 워드프레스에 응용하는 방법에 대해서도 간단히 살펴봅니다. 자바스크립트로 Select 옵션 재설정/변경하기 Javascript로 셀렉트 박스의 옵션을 비우고 다른 값으로 교체하려는 경우 다음과 같은 코드를 사용할 수 있습니다. var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"]; populateCombo(emptyCombo(document.querySele..
  • thumbnail
    IT & 기타/자바스크립트 (2)

    자바스크립트: 클래스가 있는지 체크하기

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

    자바스크립트: 숫자 천 단위마다 콤마를 찍는 방법

    자바스크립트를 사용하여 숫자 천 단위마다 콤마를 찍는 방법 중 하나입니다. 다양한 방법이 있으므로 상황에 맞는 스크립트를 선택하여 사용하시면 될 것 같습니다. 자바스크립트: 숫자 천 단위마다 콤마를 찍는 방법 정수에 천 단위마다 콤마를 넣는 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..
  • thumbnail
    IT & 기타/자바스크립트 (2)

    이미지 가로 세로 크기 동일하게 만드는 방법 (정사각형)

    화면 크기가 달라져도 이미지의 가로 크기와 세로 길이가 동일하게 유지되도록 하고 싶은 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..
  • thumbnail
    IT & 기타/자바스크립트 (6)

    화면을 아래로 스크롤할 때 상단 메뉴를 고정하는 방법 (자바스크립트)

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

    자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용]

    자바스크립트를 사용하여 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를 사용하면 됩..
  • thumbnail
    IT & 기타/자바스크립트

    CSS/Javascript/jQuery 팝업 플러그인

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

    가성비가 뛰어난 웹호스팅

    저렴하고 가성비 좋은 웹호스팅
    최근 댓글

    서비스를 생각한다면 삼성이⋯

    💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    저도 노트북에 모니터 연결하⋯

    💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    무거운 게임 안 하고 주로 사⋯

    💬무찌마

    저는 삼성하고 엘지 것이 제⋯

    💬★이카루스★

    감사합니다~ 즐거운 하루 보⋯

    💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    워드프레스 시작 가이드

    워드프레스 시작하기
    워드프레스 네이버 카페
    이모티콘창 닫기
    울음
    안녕
    감사해요
    당황
    피폐

    이모티콘을 클릭하면 댓글창에 입력됩니다.

    프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드