본문 바로가기
반응형

분류 전체보기706

[VueJS] 값에 따라 class 적용하기 (ft. v-bind:class , v-bind class multiple) vueJS에서 클래스 바인딩을 하는 방법에 대해 알아보자. vue를 사용하기 이전에는 스크립트로 특정 태그를 가져와 조건에 따라 클래스를 추가하고 제거하는 과정을 했다면, vueJS를 사용하게 되면 그 일련의 과정들이 매우 간결해진다. 일단 기본적인 구문은 아래와 같다. ▷ 구문 v-bind:class = {적용될 클래스명 : true/false 조건식} 이제 예제 코드를 통해 접해보자. ▷ 예제1) 데이터 값으로 클래스 적용하기 new Vue({ el: '#app', data: { isActive : true }, }); 이런식으로 true/false가 될 조건식을 데이터를 기준으로 클래스 적용이 가능하다. 굳이 boolean값이 아니더라도 true/false를 만들어낼 수 있는 조건이라면 아무거나 상.. 2021. 1. 20.
[jQuery] 클래스 추가, 제거, 토글, 확인 하기 (ft. addClass, removeClass, toggleClass, hasClass) jQeury를 기반으로 특정 요소의 class를 추가, 제거, 토글, 확인 하는 방법에 대해 알아보자. 각각 제목에서 언급한 것 처럼 addClass, removeClass, toggleClass, hasClass 이다. ▷ html 이렇게 html 을 가지고 있다는 가정하에 예제 코드를 살펴보자. ▷ 예제1) addClass() - 클래스 추가 $('.mine').addClass('it'); // ▷ 예제2) removeClass() - 클래스 삭제 $('div').removeClass('mine'); // ▷ 예제3) toggleClass() - 클래스 토글 $('div').toggleClass('mine'); // $('div').toggleClass('mine'); // toggle에 대해 잘 모.. 2021. 1. 16.
[jQuery] radio / checkbox 제어하기(ft. 활성화/비활성화) input 태그의 text의 경우 readonly라는 속성을 가지고있어 쉽게 활성화/비활성화를 시킬수 있지만 radio/checkbox 같은 녀석들은 readonly 속성을 사용할 수 없다. 그래서 radio/checkbox의 활성화/비활성화 제어 방법에 대해 기록해 두고자 한다. 사실 찾아보면 다양한 방법들이 나올텐데 여기서는 readonly 대신 사용할 수 있는 disabled 라는 속성을 활용할 것이다. 코드를 통해 가볍게 접근해보자. ▷ 예제1) radio/checkbox 제어 $("input:checkbox[name=mineCheck]").attr("disabled", true); //비활성화 $("input:checkbox[name=mineCheck]").attr("disabled", fals.. 2021. 1. 10.
[JavaScript] 정규식을 사용한 숫자 천단위 콤마 찍기 간단하게 정규식 포현을 활용하여 숫자의 천단위 콤마 찍기 와 천단위 콤마 제거에 대해 익혀보자. 정규식 표현식을 자세히 모르지만 인터넷에 널려있기에 기록해둔다. ▷예제1) 천단위 콤마 찍기 "1234123412345".replace(/\B(?=(\d{3})+(?!\d))/g, ","); // "1,234,123,412,345" ▷예제2) 천단위 콤마 제거하기 "1,234,123,412,345".replace(/[^\d]+/g, ""); // "1234123412345" 2021. 1. 10.
[JavaScript] Object.keys() - 객체의 key 값들만 뽑아내기 스크립트에는 Object.keys() 라는 메서드를 제공해주는데 특정 객체를 대상으로 key값들만 뽑아서 배열로 반환하는 메서드이다. ▷ 구문 Object.keys(obj) 예제를 통해 알아보도록 하자. ▷ 예제1) var obj = { a: 2, b: 42, c: 4 }; Object.keys(obj); // [a, b, c] 이렇게 특정 객체의 key값들만 뽑아서 배열로 반환해주는게 있는가 하면 당연히 value값들만 뽑아서 배열로 반환해주는 메서드도 존재한다. [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 [JavaScript] Object.values() - 객체의 value 값들만 뽑아내기 객체에 담아서 사용하다보면 key값들만 뽑아서 사용하거나 val.. 2021. 1. 10.
[JavaScript] Object.assign() - 서로 다른 객체 병합하기/합치기 앞서 스크립트에서의 서로다른 문자열 또는 배열을 합치는 방법에 대해 알아봤는데 이번에는 서로 다른 객체를 병합하는 방법에 대해 알아보고자 한다. ▷ 구문 Object.assign(target, ...sources) target: 기준이 될 객체를 의미한다. sources : 기준이 될 객체에 합치려는 객체들을 의미한다. 이제 예제를 통해 알아보도록 하자. ▷ 예제1) 기존의 객체 변수에 병합하기 var mine = {a : 0 , b : 1}; var it = {b : 3, c : 7}; Object.assign(mine, it); // mine = {a: 0, b: 3, c: 7} 위 구문에서 target 과 sources로 나뉘어 있다고 명시해 뒀는데, 예제와 마찬가지로 target이 되는 mine .. 2021. 1. 6.
[JavaScript] concat() - 서로 다른 문자열 또는 배열 병합하기/합치기 스크립트를 사용하는 중에 서로 다른 배열 또는 문자열을 합쳐야 하는 경우가 생길 수 있는데, concat() 이라는 메서드에 대해 알아보고자 한다. 제목 그대로 문자열끼리 혹은 배열끼리 사용이 가능한 메서드이며 각각 String.prototype.concat() / Array.prototype.concat()을 의미한다. ▷ 구문 .concat(value1[, value2, value2, ..., valueN]) 예제를 통해 알아보도록 하자. ▷ 예제1) String.prototype.concat() var str1 = 'mine'; var str2 = 'it'; var str3 = 'record'; console.log(str1.concat(str2, str3)); // "mineitrecord" co.. 2021. 1. 5.
[JavaScript] canvas 이미지 클립보드에 복사하기 최근 html2canvas.js를 활용하여 canvas에 스크린샷을 찍어서 보여주는 기능을 만들었는데 여기에 추가적으로 클립보드에 복사할 수 있는 기능이 필요하다하여 기록해둔다. 일단 예제를 통해 접근해보자. ▷ 예제1) canvas.toBlob(function(blob){ var item = new ClipboardItem({ "image/png": blob }); navigator.clipboard.write([item]); }); 코드는 일단 canvas에 html2canvas.js를 활용한 스크린샷 이미지가 존재한다는 가정하에 사용이 가능하며 코드 자체는 길지 않다. 다만 몇가지 주의 사항이 있는데 일단 IE에서는 사용이 불가능하다. (IE에서는 역시 되는게 없다...) 그림 출처 : https:.. 2021. 1. 4.
[jsTree] plugin wholerow 사용하여 tree node 편하게 클릭 하기 jstree 에서 제공하는 plugin중에 하나인 wholerow plugin 에 대해 알아보자. 이번에 알아볼 wholerow는 사실 가볍게 사용할 수 있는거라 그렇게 어렵지않다. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }.. 2021. 1. 3.
반응형
TOP

티스토리툴바