리디북스에 들어갔다가 신기한 걸 봤다. 2D 이미지를 가지고 약간의 입체효과를 CSS로 구현한 것이다. [출처] http://ridibooks.com/v2/Detail?id=754015309 Before After

Front end 웹사이트 성능 측정 및 개선 from 기동 이

네이버에서 공유하기 버튼을 내놓았습니다. HTML에디터가 있다면 손쉽게 다른 블로그에 붙여 넣을 수 있습니다.티스토리도 이런 링크스크랩 기능이 생기면 좋을 것 같네요. 1. 원하는 버튼 유형을 선택하고 코드를 복사합니다. http://section.blog.naver.com/share/guide.nhn 2. 티스토리 HTML/CSS 편집에 들어가 articla div 다음에 코드를 붙여 넣어줍니다. 3. 공유하기 버튼을 눌러보면 아래와 같은 팝업이 뜹니다. 4. 네이버 블로그에서 확인해 보면 아래와 같이 링크스크랩이 됩니다. ※ 특정 포스팅에만 올리고 싶다면, 아래와 같이 에디터에서 직접 입력하는 방법을 이용하면 됩니다.

개요CSS 를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도 줄일 수 있는 방법들을 찾기 위해 브라우저의 작동원리를 이해해보고, 그에 따른 문제해결 방법을 찾아보고자 한다.브라우저 렌더링 프로세스의 이해브라우저의 기본구조 User Interface - 주소창, 뒤로가기/앞으로가기 버튼, 즐겨찾기 기능등을 포함하며 브라우저 중 웹페이지 표시부분(document)을 제외한 거의 모든 부분에 해당.Browser Engine - 렌더링 엔진에 질의를 보내며, 조작하는 인터페이스Rendering Engine - 요청된 콘텐츠를 화면에 뿌려주는 기능을 담당함..

http://ricostacruz.com/jquery.transit/ CSS Transition 으로 만들 수 있는 효과들을 jQuery로 처리할 수 있게한 플러그인브라우저 서포트가 좀 아쉽긴하다. 이럴거면 굳이 jQuery를 사용하는 이유가 뭘까?여튼 도움은 될 것 같아 수집해 놓는다.

1. Count-Up Animation (v.0.1-2015.09.23) /* Today's Mission Count-Up Animation*/ var total = $('#today-total').text(); var up = 0; var num; var limit = -110*total; for(var i=0; ilimit && num

[이슈] 의 경우 브라우저 마다 (크롬/IE vs 파이어폭스) 렌더링 결과값이 다르게 나온다. [해결] 부모 요소인 에 position: relative 를 주고 을 position: absolute 로 px 조정하였다. 하지만 임시방편일 뿐 원인을 찾아봐야겠다.

[출처] http://caniuse.com/#search=placeholder 1. placeholder에 색상을 지정할 경우, opacity를 1로 지정해야 정확한 색상을 사용할 수 있다.&::-webkit-input-placeholder/* Chrome, Safari, Opera */font-weight: 300color: #a9a9a9opacity: 1 &::-moz-placeholder/* Firefox 19+ */font-weight: 300color: #a9a9a9opacity: 1 &:-ms-input-placeholder/* IE 10+ */font-weight: 300color: #a9a9a9opacity: 1 &::-ms-input-placeholder/* IE Edge */font-w..