발생일: 2015.03.23 키워드: jQuery, show, display, inline, inline-block, span 문제: `inline-block` 스타일이 할당되어 있는 `` 엘리먼트가 있다. 이 엘리먼트가 DOM에 붙기 전에 `show()`를 호출하게 된 케이스가 있었는데, 이상하게도 아래처럼 `inline-block`이 아닌 `inline`이 인라인 스타일로 추가되어 있다. ... 왜 그런 걸까? 해결책: 엘리먼트가 DOM에 붙기 전에 show()를 호출한 경우, css 스타일을 갖고 있더라도, “태그의 기본 속성에 따라” 스타일이 설정된다. jQuery의 `show()`메서드에서 호출하는 기본 display 값 때문이고, 아래 코드에서 확인해볼 수 있다. https://github.c..
엘리먼트의 크기 가져오기 (offsetWidth, clientWidth, scrollWidth)
발생일: 2015.01.16 키워드: element, offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, scrollHeight, getBoundingClientRect(), element size, dimension 내용: 엘리먼트의 크기를 구하는 방법에는 여러 가지가 있다. offsetWidth, clientWidth, scrollWidth 속성이나 `getBoundingClientRect()`로 가져올 수 있고, 각 속성이나 메서드의 차이점은 아래와 같다. offsetWidth, offsetHeight 일반적으로 엘리먼트의 전체 크기를 알고 싶다면, `offsetWidth`와 `offsetHeight` 속성을 가져오면 된다. 이 속..
문서 내에서 렌더링 된 엘리먼트의 절대 위치 가져오기
발생일: 2015.01.16 키워드: getClientRects, getBoundingClientRect 내용: 문서 내에서 렌더링 된 엘리먼트의 절대 위치를 계산해야 한다면, getClientRects() 와 getBoundingClientRect() 메서드를 사용해 윈도우 기준으로 렌더링 된 위치를 가져온 후에, 문서의 스크롤 값을 더해주면 된다. element.getClientRects() 엘리먼트를 감싸고 있는 박스들의 크기를 가져온다. 각 태그마다 박스가 다르다. 예를 들면, 줄바꿈이 있는 엘리먼트나, 기본 리스트 스타일이 적용된 li 태그 등이 그렇다. 마진을 제외하고, 엘리먼트를 감싸고 있는 박스의 위치와 크기를 가져온다. (보더와 패딩을 포함한 크기) 아래 이미지를 보면 이해하기 쉽다. 빨..
Date 객체의 String 처리
발생일: 2015.01.02 키워드: Date, toTimeString(), toISOString(), toUTCString() 내용: Date 객체에는 `toString()` 말고도 다양한 문자열 출력 메서드를 갖고 있다. - toTimeString(): 날짜를 제외하고 시간만 출력한다. (ECMA3 부터 지원) - toISOString(): ISO8601 포맷으로 출력한다. (ECMA5 부터 지원한다. IE9~) - toUTCString(): UTC 포맷으로 출력한다. 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toTimeString
발생일: 2015.04.22 키워드: IE8, bubbling, 버블링 문제: 버블링 되기 전에 타겟 엘리먼트를 삭제한 경우, IE8에선 버블링에 의한 이벤트가 발생하지 않는다. 해결책: 아래와 같은 구조를 가지고 있다고 했을 때, button 아래 스크립트는 IE8과 다른 브라우저 간 동작이 다르다. // 하위 엘리먼트에서 이벤트를 받아 바로 삭제한다. $('#btn').on('click', function (e) { $(e.target).remove(); }); $('#wrap').on('click', function (e) { alert(e.target.innerHTML); // IE8에서는 이 코드가 실행되지 않는다. 이 외 브라우저에서는 동작한다. }); http://jsbin.com/yukok..
발생일: 2015.04.15 키워드: IE8, last-child, first-child 문제: :last-child 슈도 클래스를 적용해서 엘리먼트에 스타일을 줬는데, IE8에선 적용되지 않는다. 어랏. first-child 랑 같이 모두 지원되던 거 아니었나? 해결책: 아니었다. -_- :last-child 는 IE9부터 적용되었다고 한다. :first-child 를 사용하는 방법으로 우회해 해결했다. 참고: http://stackoverflow.com/questions/8840802/first-child-and-last-child-with-ie8
발생일: 2015.04.15 키워드: IE8, getBoundingClientRect 문제: `Element#getBoundingClientRect()`로 엘리먼트의 사이즈를 가져와 처리하는 코드를 작성했는데, IE8에선 동작하지 않는다. 왜일까? 해결책: `getBoundingClientRect()` 의 width 와 height 속성은 IE9부터 지원한다. 또한, IE8 이하에서 getBoundintClientRect() 의 리턴된 rect 객체는 읽기 전용이기 때문에, 다른 속성을 할당하는 것만으로도 오류가 발생한다. rect.height = 100; //—> IE8에서 오류 발생 편의를 위해 아래와 같은 유틸리티를 만들어서 사용하는 방식으로 처리했다. var getBoundingClientRect..
발생일: 2015.01.16 키워드: Google Analytics, 구글 애널리틱스 문제: 구글 애널리틱스를 살펴보다가, 코드에 재밌는 부분이 있어 메모해둔다.ㅎㅎ 해결책: 애널리틱스 코드를 보면서 `script` 문자열을 왜 파라미터로 전달할까… 라고 생각했었는데, 풀어놓은 코드의 주석을 보니 변수 선언에 대한 바이트 절약 때문이란다. 오오… 최적화를 많이 고민했구나. /** * Creates a temporary global ga object and loads analy tics.js. * Paramenters o, a, and m are all used internally. They could have been declared using 'var', * instead they are declare..
발생일: 2014.01.05 키워드: Google Analytics, Chrome extension, 크롬 확장 프로그램, 구글 애널리틱스 문제: 이번에 네이버 영어사전 크롬 확장 프로그램에 구글 애널리틱스를 추가하려고 한다. 일전에도 한 번 넣었다가 제대로 동작하지 않아서 그냥 넣어뒀던 코드가 있어서 꺼내봤는데, 역시나 여전히 동작하지 않는다. ㅎㅎ 게다가, 이전 코드는 `ga.js` 를 사용하는 것이었는데, 애널리틱스에서 로드하는 스크립트가 바뀌었더라. 문서를 보니 예전 방식인 `ga.js`를 사용하는 것은 ‘클래식 애널리틱스’ 이고, 새로 변경된 것은 ‘anaytics.js’를 사용하는 ‘유니버셜 애널리틱스’라고 한다. https://developers.google.com/analytics/devg..
발생일: 2015.01.03 키워드: window, exports, node 문제: 어떤 오픈소스 코드를 보다가, 브라우저 환경과 node 환경을 모두 커버할 수 있는 코드 패턴을 발견해서 메모해둔다. 해결책: (function (exports) { var module = … (모듈 정의); exports.module = module; }(typeof exports === ‘undefined’ ? window : exports));