WIT – NTS UIT Blog

CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용)

Posted by in Research

모바일 네이버 지도 개편을 하면서 검색창 부분과 상세페이지 스크롤 부분에 애니메이션이 추가되었습니다. 초기 검색창 부분 애니메이션은 CSS 속성 중 margin, height을 사용하여 구현했습니다. 하지만 애니메이션이 부자연스러운 현상이 있어 자료를 찾아보니 margin, height 속성은 애니메이션에 사용했을 때 성능 저하를 유발하는 속성 중 하나였습니다. 성능에 영향이 있는 속성들은 페이지 reflow를 일으키는 속성들이였고 이를 수정하여 성능을 향상 시킬 수 있었습니다. 이 글에서는 reflow를 최소화 하는 방법과 will-change를 설명하겠습니다. 검색창 애니메이션 초기에는 아래와 같은 애니메이션을 구현하고자 했습니다. 총 4가지 애니메이션이 들어가있는데요. 검색창이 왼쪽으로 축소되고 아래쪽으로는 확장됩니다. 검색창이 왼쪽으로 계속 축소되고 아래쪽으로는 확장됩니다. 추가로 한 줄 검색창은 fade-out,…read more

웹폰트 사용하기 (웹폰트 101)

Posted by in Research

1. 웹폰트란? 웹 폰트는, 방문자의 로컬 컴퓨터에 서비스 제공자가 원하는 서체가 없을 경우, 온라인의 특정 서버에 위치한 서체 파일을 내려받아 화면에 표현할 수 있도록 해주는 웹 전용 서체입니다. 이 새로운 CSS3 규약을 사용하면 원하는 서체 스타일시트의 @font-face에 등록하고, font-family 속성을 통해 문서 안에서 자유롭게 사용할 수 있습니다. 2. 웹폰트를 사용하기 위해 알아야하는 속성 2-1. @font-face 기본 규칙

위의 코드는 웹폰트를 사용하는 기본적인 방법이며, NanumGothic체를 웹폰트로 사용하기 위한 예제입니다. 2-2. @font-face 속성 설명 font-family : CSS 문서에서 사용할 서체 이름입니다. src: src를 통해 로컬 컴퓨터에 설치 된 서체의 경로를…read more

[JSer.info#번역] 2014-12-08 자바스크립트 주요 소식

Posted by in Research

Firefo 34.0 릴리즈 Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고,  profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요. WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 등 ES6의 기능이 구현 됐습니다. Firefox 34 for developers QUnit 1.16.0 릴리즈 자바스크립트 테스트 라이브러리 QUnit 1.16.0이 릴리즈됐습니다.  코드를 리팩토링했고 done() 스타일의 비동기 테스트와 Promise 테스트 지원하는 등 QUnit 2.x를 위한 여러 사항이 반영됐습니다. 2.0에서 바뀌는 부분은 「QUnit 2.x에서 바뀌는…read more

0