본문으로 바로가기

IT & 기타/자바스크립트

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

    jQuery 더 읽기/닫기(Read More/Less) 토글

    더 읽기(Read More) 버튼을 클릭하면 전체 텍스트가 표시되면서 닫기(Less) 버튼이 표시되도록 하는 jQuery 예시입니다. jQuery 더 읽기/닫기(Read More/Less) 토글 HTML 코드: 청춘 하여도 노래하며 할지니, 피어나기 가슴에 피가 운다. 수 같이, 원대하고, 피다. 귀는 생생하며, 용감하고 인간에 풀밭에 이상, 봄바람이다. 거친 이 없으면 석가는 노년에게서 싸인 그러므로 지혜는 부패뿐이다. 피가 석가는 있는 뭇 자신과 것이다. 가치를 인간에 타오르고 사라지지 이성은 풀이 충분히 찾아 피다. 있는 천지는 같지 끓는 소금이라 사막이다.모래뿐일 얼음이 끝에 있는가? 거친 천고에 위하여서, 피가 예가 품에 그들의 몸이 작고 있는가? 구하기 전인 가는 사랑의 싸인 그러므로 것은 끓..
  • thumbnail
    IT & 기타/자바스크립트

    텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기

    텍스트 입력 상자에 숫자만 입력 가능하도록 하거나 숫자와 하이픈만 입력을 허용하고 싶은 경우가 있습니다. 이 경우 text input 필드의 타입을 number나 tel로 변경하는 것을 고려해볼 수 있습니다. input 타입을 nubmer로 변경하면 숫자만 입력 가능하고 tel로 설정하면 숫자와 하이픈(-)과 더하기 기호, 괄호 등 전화번호 입력에 필요한 숫자와 문자만 입력할 수 있습니다. text 타입을 그대로 두고 숫자만 입력 가능하도록 하거나 숫자와 하이픈(-)만 입력하도록 허용하려는 경우 아래의 자바스크립트나 jQuery 스크립트를 활용할 수 있습니다. 텍스트 입력 상자에 숫자와 하이픈만 입력 허용하기 다음 자바스크립트를 적용하면 숫자와 대시(-)만 입력이 가능하게 됩니다. var userName..
  • thumbnail
    IT & 기타/자바스크립트 (1)

    CSS를 사용하여 하단 배너 만들기

    이 티스토리 블로그의 하단에는 배너가 표시되고 있습니다. 닫기 기능이 있는 배너의 경우 보통 Javascript를 사용하지만 이 블로그에 사용된 배너는 HTML/CSS만으로 구현되었습니다. Javascript를 이용하면 닫기를 누르면 하루 동안 표시되지 않도록 하는 것도 가능합니다. 하단 배너 만들기(Close 버튼 포함) 워드프레스의 경우 다양한 배너 플러그인이 있습니다. 예를 들어, Brave 플러그인을 사용하면 다양한 형식으로 팝업이나 배너를 표시하는 것이 가능합니다. 워드프레스 Brave 팝업 플러그인 설정 살펴보기 워드프레스 Brave 플러그인은 팝업 플러그인으로 개발되었지만 컨택트 폼, 이메일 주소 수집 등 다양한 기능을 제공하는 플러그인으로 진화하고 있습니다. 이 플러그인을 사용하여 배너를 ..
  • thumbnail
    IT & 기타/자바스크립트 (3)

    [자바스크립트] 마우스 우클릭 금지 방법

    사이트 방문자들이 텍스트를 복사하지 못하거나 이미지를 다운로드하지 못하도록 마우스 우클릭을 금지하는 코드를 넣거나 오른쪽 마우스 방지 플러그인을 설치하는 경우 사용자 경험(UX)에 부정적인 영향을 미치고 SEO에도 좋지 않습니다. 특히, 코드를 공유하는 사이트에서 마우스 우클릭 금지 조치를 취하게 되면 방문자들의 원성을 사게 됩니다. 또한, 우클릭 금지는 쉽게 무력화될 수 있으므로 효과도 없습니다. 즉, 마우스 우클릭 금지는 방문자들의 불편을 야기하여 SEO에 부정적인 영향을 미치고 쉽게 무력화될 수 있어 효용성도 없습니다. 대안으로 이메일 주소를 입력하거나 회원으로 가입하는 경우에 코드를 복사할 수 있도록 허용하는 것을 생각해볼 수 있습니다. 해외 블로그에서 이 방법으로 뉴스레터 구독자나 회원을 늘리는..
  • thumbnail
    IT & 기타/자바스크립트

    복수 클래스로 된 요소 선택하기 (자바스크립트)

    예를 들어, document.querySelectorAll(".class1")을 사용하면 class1 클래스로 된 모든 요소에 적용됩니다. class1 클래스 또는 class2 클래스로 된 모든 요소를 선택하고 싶은 경우가 있을 수 있습니다. 이런 경우 개별적으로 만들어도 되겠지만 비효율적일 것입니다. 복수 클래스로 된 요소 선택 방법 How to get elements with multiple classes라는 제목의 Stackoverflow 글에서 class1 클래스와 class2 클래스가 모두 있는 요소를 선택하는 방법에 대하여 다루고 있습니다. 이 경우 다음과 같은 코드를 사용할 수 있습니다. var list = document.getElementsByClassName("class1 class2"..
  • thumbnail
    IT & 기타/자바스크립트 (2)

    특정 CSS 클래스에 download 속성 추가하기 [자바스크립트]

    이미지 파일이나 PDF 파일에 링크를 거는 경우 링크를 클릭하면 이미지 파일이나 PDF 파일이 브라우저에서 실행됩니다. 미디어 파일이 다운로드되도록 하고 싶은 경우 download 속성을 추가하면 됩니다. 예시: 자바스크립트를 사용하여 특정 CSS 클래스에 download 속성 추가하기 특정 CSS 클래스에 download 속성을 추가하고 싶은 경우 간단하게는 jQuery를 사용할 수 있습니다. $("a").attr("download", true); 자바스크립트를 사용하려는 경우 "How can we add a download attribute to all the tags present inside tag (using JavaScript)?" 문서에 제시된 다음과 같은 코드를 적절히 응용할 수 있습니다...
  • thumbnail
    IT & 기타/자바스크립트 (13)

    [자바스크립트] 외부 링크를 새 창으로 열기

    이전 글에서 내부 링크를 새 창으로 여는 것과 현재 창에서 여는 것이 애드센스 수익에 미치는 영향에 대해 살펴본 적이 있습니다. 애드센스 수익: '새창으로 열기' vs. '현재 창으로 열기' (링크 태그 target 속성) 티스토리 블로그에서 링크를 삽입할 때 기본적으로 '새창으로 열기'가 선택되어 있습니다. 저는 워드프레스 블로그와 티스토리 블로그에서 대부분의 링크를 '새창으로 열기'로 설정하고 있습니 avada.tistory.com 경험자들에 의하면 내부 링크는 현재 창으로 여는 것이 전면 광고가 표시될 가능성을 높여서 애드센스 수익 증대에 긍정적인 역할을 할 수 있습니다. 외부 링크는 새 창에서 열리도록 하는 것이 방문자들이 사이트 이탈하는 것을 방지하여 SEO에 긍정적인 영향을 줄 수 있습니다. ..
  • 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..

    가성비가 뛰어난 웹호스팅

    저렴하고 가성비 좋은 웹호스팅

    저도 같은 사람한테 당했는 데... 청산사랑 => 이 ⋯

    💬Xenoint

    플러그인 사용이전하는 방법이로군요^^

    💬空空(공공)

    트라도스서식 알아 갑니다^^

    💬空空(공공)

    예전에는 새로운 버전 출시 전 몇 달 전에 구입할 경우⋯

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

    무료로 업그레이드 해주면 더 충성도가 올라갈텐데요

    💬본연의 힘

    워드프레스 시작 가이드

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

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

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