아카이브: 2017/5

CSS3 Conditional Statements

CSS3 Conditional Statements미디어 쿼리에 대한 스펙 ‘CSS 3 Conditional Statements’에서는 미디어쿼리 @media 외에도 @supports와 @document 지시자를 사용한 새로운 기능에 대해서도 정의를 하고 있다. @supports 특정 css 속성을 브라우저가 지원하는지 또는 하지 않는지 판단하여 특정 스타일

fiddler

피들러란?컴퓨터와 인터넷 사이의 HTTP(s) 트래픽에 대한 모든 로그를 확인할 수 있는 무료 웹 디버깅툴이다.클라이언트(컴퓨터)에서 서버로 요청한 내역과 결과의 모든 데이터를 확인이 가능하고 실서비스 되는 페이지의 이슈나 버그를 해결하고자 할 때 실서버에 파일을 올리지 않고도 미리 확인해 볼 수 있는 유용한 기능을 가지고 있다. 피들러 주요 기능 HTT

Ubuntu OS Install Partition

효과적인 우분투의 파티션 구성우분투를 처음 설치하는 분들은 이런저런 고민이 많을 것이다. 처음보는 생소한 단어나 용어들의 어려움이 있을 것이다. 그 중 대표적인 것 하나가 바로 우분투 설치시 파티션의 구성 및 설정들의 대한 부분이다.이번엔 우분투에서 효과적으로 파티션을 구성하는 방법에 대해 알아보도록 하겠다. 한 개의 하드디스크에 우분투만 사용할 경우 이

Ubuntu OS Install

Ubuntu OS 설치하기Ubuntu Linux는 데비안 계열의 리눅스 배포본으로 APT, Unity등 사용자 편의성에 초점을 맞춘 툴들이 많이 존재하고 가장 대중적인 리눅스로 리눅스를 처음 접하는 사람이 사용하기에 적당하다. 설치 버전 선택 현재 Ubuntu Desktop의 최신버전 배포버전은 17.04 이다.하지만 Ubuntu는 최신 버전보다는 더 오래

Javascript Animation Performance2

JavaScript 애니메이션 성능을 높이는 방법 2편최신 웹, 모바일 디바이스 브라우저에서 모션을 구현하고자 한다면 자바스크립트 애니메이션 성능 높이는 방법 1편 에서 설명한 구현 방법 보다는 CSS will-change 프로퍼티 속성이란 것을 활용해볼 수 있다. 웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할

Mobile Web Debbuging

모바일 웹 디버깅처음 모바일 웹 개발을 시작하는 사람이 느끼는 가장 큰 어려움은 아마도 모바일 웹어서 디버깅하는 것일 것이다. 모바일 기기는 데스크톱에 디해 화면도 작고 입력장치도 불편해 실제로 개발하고 디버딩하는 데 많은 어려움이 있다. 특히, 데스크톱에서 지원하는 디버깅 도구에 익숙한 개발자라면 답답한 정도가 더할 것이다. 모바일 웹 개발자 도구 개발이

Javascript Animation Performance

JavaScript 애니메이션 성능을 높이는 방법애니메이션이 많은 화면에서는 성능과 관련된 문제가 일어나기 쉽다. 특히, 하드웨어 성능이 PC에 비해 열악한 모바일 환경에서는 성능이 문제가 되는 경우가 더욱 많다. 브라우저 렌더링 과정 웹 브라우저의 애니메이션 성능을 이야기하기 전에 이해해야 할 것이 브라우저의 렌더링 과정이다. 애니메이션도 브라우저 렌더링

Javascript Effective Animation

JavaScript 효과적인 애니메이션 구현하기애니메이션은 하나 이상의 이미지(frame)을 일정한 시간(second) 간격으로 순차적으로 호출해 이미지가 움직이는 것처럼 보이도록 착시 현상을 유도하는 기술이다. 이때 보이는 이미지의 개수와 시간 간격의 비를 FPS(frames per cecond)라고 하며, FPS 값이 클수록 더 자연스러운 애니메이션을

Javascript PagesShow PagesHide Event

JavaScript pageshow 이벤트, pagehide 이벤트네트워크 연결 속도가 느리고 연결 비용이 높은 모바일 환경에서는 pageshow 이벤트와 pagehide 이벤트가 중요하다. PC와는 다르게 모바일 브라우저에서는 이 이벤트가 페이지 캐시를 모두 지원하기 때문에 특별히 활용도가 높다. pageshow 이벤트와 pagehide 이벤트는 wind

Javascript Mobile Browser Different Event

JavaScript 데스크톱과 다르게 동작하는 이벤트모바일 브라우저에서도 화면이 스크롤되면 scroll 이벤트가 발생하고, 키보드와 마우스 관련 이벤트도 발생한다. 그러나 모바일 브라우저에서 발생하는 이런 이벤트는 데스크톱 브라우저에서 발생할 때와는 발생 순서나 발생 횟수 등이 다르다. scroll 이벤트 scroll 이벤트는 브라우저의 스크롤 막대가 움직