Web Standard

이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다. CSSStyleSheet 인터페이스 인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다. 아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다. console 창에 로그를 찍어보면 사용 가능한 메소드..

CSSOM 이란? MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model) The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 ..

참고 : https://www.freecodecamp.org/ 객체 생성 기본과 접근자동차, 가게, 새 같은 모든 것들이 객체이다. 어떤 속성이 있는가? 자동차는 바퀴를 가지고 있고, 가게에서는 물건을 팔며, 새는 날개를 가지고 있다.이런 속성들이 객체를 만든다. 유사한 객체들은 동일한 속성을 공유하지만 그 값은 다양하다는 점에 주목하라. 예를 들어 모든 자동차에는 바퀴가 있지만, 바퀴 숫자는 차종마다 다른것 처럼 말이다. 자바스크립트의 객체는 실제 객체를 모델링하는데 사용되며 실제 객체와 마찬가지로 속성과 기능을 부여한다. 이런 컨셉으로 작성된 오리(duck) 객체를 살펴보자. duck 객체는 2개의 속성과 값을 가지고 있다. 이름은 Aflac, 다리의 수는 2 이다. 속성의 값을 얻기 위해서는 점(...

대부분의 개발자들은 console.log 를 사용해서 특정 값을 확인하고 디버깅 합니다. 그런데, console 에는 console.log 말고도 여러 메소드가 있다는걸 알고 계시나요? 아래 예를 보겠습니다. 각 로그들은 서로 다른 방식으로 표현되기 때문에 쉽게 구분할 수 있습니다. (스타일은 브라우저 마다 다릅니다.) 또한, 보다 구조적이고 가독성을 높일 수 있게 그룹으로 묶을 수 있습니다. 그룹은 중첩으로 표기할 수 있습니다. 그룹을 축소된 상태로 표시하려면 console.groupCollapsed() 를 사용하세요. 성능 측정 코드 지점간 시간을 측정하면 특정 작업의 성능을 쉽게 확인할 수 있습니다. 보통 이런 방법을 사용하시나요? 좀 더 우아하게 표현 해볼까요? 코드는 더 짧고, 측정은 더 정확하..

특정 폴더에 있는 png 이미지들을 webp로 변환시켜주는 툴을 만들어 보겠습니다. 간단하게 Node js 로 제작합니다. 우선 프로젝트 폴더를 만들어 주고 $ npm init 으로 프로젝트를 생성합니다. 그 후, 이미지 변환에 필요한 패키지들을 설치해 줍니다. (Global로 설치하셔도 무방합니다.) $ npm install imagemin imagemin-webp --save imagemin : 이미지 미니파이 해주는 툴imagemin-webp : imagemin의 webp 플러그인 설치가 완료 되었으면, /webp.js 파일을 만들어 줍니다. 퀄리티가 75% 이므로 손실이 있습니다. 만약 무손실 옵션을 사용하고 싶다면 로 작성해줍니다. 작성이 완료 되었으면 sources 폴더에 png 이미지 파일들..

DataTables 의 language 옵션을 이용하면 쉽게 한글화 할 수 있습니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 // DataTables Default var lang_eng = { "decimal" : "", "emptyTable" : "No data available in table", "info" : "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty" : "Showing 0 to 0 of 0 entries", "infoFiltered" : "(filtered from _MAX_ total entries)",..

DataTables 를 이용해서 테이블을 만든 후 복사하기/엑셀로 저장하기/PDF로 저장하기/프린트 하기 버튼을 달아보자. buttons: [ 'copy', 'excel', 'pdf', 'print' ] 부분을 옵션으로 주면 간단하게 적용할 수 있다. 만약 오류가 발생되거나 아무 버튼도 노출되지 않는다면 필요한 js파일을 모두 정상적으로 불러 왔는지 체크해볼것. 결과물 (좌측 상단의 버튼들) 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 TEST var data..

운영툴을 만드는데 테이블이 필요해서 datatable 을 사용했다. datatable의 장점은 프론트나 서버사이드 개발자가 소팅, 페이징, 검색등을 전혀 신경쓰지 않아도 된다는 점이다. JSON으로 응답받는 정보들은 그냥 전체 리스트를 내려주기만 하면 된다. 그러면 datatable이 알아서 테이블을 그려주고, 일단 테이블이 완성된 이후에는 검색이나 소팅이 굉장히 빠르게 동작한다. (특정 액션을 할때마다 API를 재호출 하는게 아니기 때문)디자인 또한 제공되는 css를 사용해서 별도 스타일을 적용하지 않아도 꽤 괜찮은 모습으로 표현된다. (우리는 semantic ui를 사용했다.)테이블 복사, Excel 다운로드등도 코드 몇줄만 추가해주면 쉽고 편리하게 구현할 수 있다. 단점은 튜닝이 어렵다는 점. 버튼..

정의 웹상에서 vector 그래픽을 생성할 수 있는 오픈소스 js 라이브러리 차트를 생성하거나 이미지 크롭 및 회전등 구현 canvas 요소를 사용하지 않고 W3C에서 정의한 SVG와 VML을 기반으로 그래픽 생성 ie에서 VML, 타브라우저 SVG로 구현 크로스브라우징을 지원하고 자바스크립트 이벤트 핸들러와 결합하여 변화를 주는것도 가능 github 코드 호스팅 사용 http://raphaeljs.com 구현 jQuery 등 js라이브러리와 마찬가지로 홈페이지에서 제공하는 js 파일을 다운로드 하거나, src를 명시해줌으로써 사용 가능 라파엘홈 > 레퍼런스 사이트를 통해 배울 수 있다. http://raphaeljs.com/reference.html 원그리기 우선 간단하게 그림부터 그려봅니다. 1. p..