-
아이폰 4S의 제품 슬라이드로 배우는 애니메이션 기법
애플 홈의 아이폰 4S 제폼 웹페이지에서 메인 비주얼를 장식하는 슬라이드는 총 6개의 애니메이션 시퀀스로 구분된 제품 특징들로 구성되어 있습니다. 이 제품 슬라이드를 구현하는 CSS 애니메이션과 자바스크립트...
Category: 자료 - 웹개발, Reactions: 11, Views: 230,540, Author: 파이어준
-
더 나은 HTML과 CSS 작성하기 - Chris Coyier
런던에서 열린 Future of Web Apps 컨퍼런스에서 Chris Coyier씨가 발표한 슬라이드입니다. Wufoo에서 CSS를 다루는 과정과 자주 범하는 실수들 그리고 가짜 요소(pseudo elements)들의 활용법에 대한 내용을 담고 있습니다. 아래...
Category: 자료 - 웹개발, Reactions: 12, Views: 76,826, Author: 파이어준
-
HTML5를 이용한 네이티브 앱 개발 도구들
새로 들어간 회사일로 HTML5를 이용하여 네이티브 앱 개발을 할 수 있는 도구들을 조사했습니다. 대표적으로 Appcelerator에서 개발한 Titanium과 Nitobi에서 개발한 PhoneGap이 있습니다. 이들은 급변하는 환경에 발빠르게 ...
Category: 자료 - 웹개발, Reactions: 11, Views: 177,904, Author: 파이어준
-
Nine Image Expander Thing
Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 ...
Category: 자료 - 웹개발, Reactions: 1, Views: 105,248, Author: 파이어준
-
실시간 스타일시트 변동사항 자동반영 - Vogue
크로스-브라우저 이슈를 가지각색으로 안고있는 스타일시트를 다루는 작업은 클라이언트-사이드 개발자들을 매우 피곤하게 합니다. 코드를 수정하고 여러 브라우저에서 확인하고 다시 수정하고 확인하는 테스트...
Category: 자료 - 웹개발, Reactions: 8, Views: 65,856, Author: 파이어준
-
CSS3로 만든 금속질감을 표현한 버튼
CSS3를 이용하여 다양한 시도를 즐기는 Simon씨는 또다시 CSS3를 이용하여 놀라운 것을 만들었습니다. 이번에는 금속질감을 표현한 버튼들입니다. 아래에 출력된 결과물은 CSS3의 repeating-gradient 속성과 텍스트 그리고...
Category: 자료 - 웹개발, Reactions: 5, Views: 50,813, Author: 파이어준
-
네비게이션 메뉴에 SVG 적용한 애플홈
최근 홈페이지 리뉴얼 프로젝트를 중간에 인수받아 우여곡절 끝에 마무리하고 성공적으로 오픈했습니다. 안정화 기간이라서 여러 개선/교정/변경 사항들이 속출하고 있는 가운데 참 재미있는 항목이 하나 있었습...
Category: 자료 - 웹개발, Reactions: 23, Views: 95,832, Author: 파이어준
-
Reflow 원인과 마크업 최적화 Tip
CSS를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도...
Category: 자료 - 웹개발, Reactions: 0, Views: 25,815, Author: 파이어준
-
CSS의 "ime-mode" 속성에 대하여
CSS에서 특정 폼의 입력 요소에 "ime-mode"속성을 사용하면 사용자의 언어 전환 상태를 컨트롤 할 수 있습니다. IE5부터 추가된 이 속성은 W3C 표준은 아니지만 현재 파이어폭스 3 이상 그리고 웹킷 계열 브라우저(사파...
Category: 자료 - 웹개발, Reactions: 11, Views: 94,151, Author: 파이어준
-
Float 속성의 높이 문제를 Overflow로 해결하는 방법
float 속성을 가진 컨테이너는 자식 요소의 높이를 무시하여 예상치 못한 결과를 출력하는 문제를 가지고 있습니다. 이 문제를 해결하기 위해 추가적인 요소에 clear 속성을 이용하는 방법이 있지만 overflow 속성을 이...
Category: 자료 - 웹개발, Reactions: 34, Views: 31,525, Author: 파이어준
-
CSS를 깨끗하게 포맷해주는 서비스 - ProCSSor
ProCSSor는 CSS 마크업을 예쁘고 깔끔하게 포맷해 주는 온라인 서비스입니다. 작성한 CSS코드를 ProCSSor에 붙여넣거나 업로드하거나 URL을 직접입력하는 방법으로 입력하고 옵션을 설정한 후 "procss" 버튼을 클릭하는 것...
Category: 자료 - 웹개발, Reactions: 22, Views: 29,562, Author: 파이어준
-
프론트-엔드 엔지니어링
프론트-엔드 업무에 대해 논란이 되고 있는 듯하여 제가 경험한 것에 빗대어 노가리나 풀어보려고 합니다. 우리 회사에는 프론트-엔드라는 명확한 포지션이 있습니다. 처음부터 있던건 아니었지만 모던 웹을 개...
Category: 자료 - 웹개발, Reactions: 32, Views: 27,701, Author: 파이어준
-
HTML5 오디오 플레이어 - XEN
CSS3를 이용하여 umbrUI를 만든 Simon씨가 최근 작업한 음악 재생기인 XEN 플레이어입니다. jQuery 라이브러리와 jPlayer 플러그인을 기반으로 만들어 졌으며, 재생/일시정지 기능을 가지고 있습니다. CSS3를 이용하여 간결...
Category: 자료 - 웹개발, Reactions: 23, Views: 46,816, Author: 파이어준
