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를 ..

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