-
MIT 라이센스 링크는 이제 mit-license.org로
지금까지 많은 사람들이 Open Source Initiative의 MIT 라이센스 페이지를 이용하여 MIT 라이센스를 명시해 왔습니다. 왜냐하면 라이센스 전문을 복사해서 쓰는 번거로움을 피할 수 있었기 때문이죠. 보통 권리자의 이름...
Category: 자료 - 웹개발, Reactions: 9, Views: 819,002, Author: 파이어준
-
Node.JS와 Express를 이용한 디렉터리 파싱
어떠한 데이터라도 받기만 하면 비주얼라이제이션하는 데에는 자신있다고 자부해 왔습니다. 그러나 며칠간 고민에 빠져들게 하는 과제가 하나 생겼습니다. 그것은 바로 '/dir1/dir2/file.name'과 같은 형식으로 반환되...
Category: 자료 - 웹개발, Reactions: 7, Views: 475,256, Author: 파이어준
-
아이폰 4S의 제품 슬라이드로 배우는 애니메이션 기법
애플 홈의 아이폰 4S 제폼 웹페이지에서 메인 비주얼를 장식하는 슬라이드는 총 6개의 애니메이션 시퀀스로 구분된 제품 특징들로 구성되어 있습니다. 이 제품 슬라이드를 구현하는 CSS 애니메이션과 자바스크립트...
Category: 자료 - 웹개발, Reactions: 11, Views: 233,751, Author: 파이어준
-
Node.JS에서 대용량 파일 전송을 미친듯 빠르게
요즘 OpenStack Object Storage(Swift)를 가지고 놀고있습니다. Swift는 아마존(Amazon)의 S3 서비스와 유사한 오픈소스화 된 오브젝트 스토리지 서비스이며 최근 주목받는 클라우드 솔루션입니다. 두드러진 특징은 ReSTful API를...
Category: 자료 - 웹개발, Reactions: 18, Views: 186,578, Author: 파이어준
-
더 나은 HTML과 CSS 작성하기 - Chris Coyier
런던에서 열린 Future of Web Apps 컨퍼런스에서 Chris Coyier씨가 발표한 슬라이드입니다. Wufoo에서 CSS를 다루는 과정과 자주 범하는 실수들 그리고 가짜 요소(pseudo elements)들의 활용법에 대한 내용을 담고 있습니다. 아래...
Category: 자료 - 웹개발, Reactions: 12, Views: 77,802, Author: 파이어준
-
섹시한 자바스크립트 코딩 컨벤션
자바스크립트를 코딩함에 있어서 그동안 습득했던 문법 규칙, 팁, 노하우, 등을 이곳에 정리합니다. 여기에서 다루는 내용은 읽는 사람에 따라서는 저수준 리팩토링일 수 있고, 성능 최적화일 수도 있고, 가독성...
Category: 자료 - 웹개발, Reactions: 32, Views: 86,419, Author: 파이어준
-
Socket.IO 0.8.5 업데이트
Socket.IO가 0.8.5로 업데이트되었습니다. 버그 수정을 포함하며, 웹소켓 프로토콜 HyBi-16(Draft)을 지원합니다. 지난 달 6일 이후 한동안 무소식하여 불안불안했는데, 반가운 소식이네요. 자세한 내용은 다음과 같으며 ...
Category: 자료 - 웹개발, Reactions: 6, Views: 35,163, Author: 파이어준
-
HTML5를 이용한 네이티브 앱 개발 도구들
새로 들어간 회사일로 HTML5를 이용하여 네이티브 앱 개발을 할 수 있는 도구들을 조사했습니다. 대표적으로 Appcelerator에서 개발한 Titanium과 Nitobi에서 개발한 PhoneGap이 있습니다. 이들은 급변하는 환경에 발빠르게 ...
Category: 자료 - 웹개발, Reactions: 11, Views: 179,309, Author: 파이어준
-
시각적 균형을 이루기위한 5가지 웹디자인 유형과 속성
Codrops에 실린 Developing Balance in Web Design을 의역한 것입니다. 요소들을 수평 또는 수직으로 배치하고 대칭 또는 비대칭으로 구성하여 웹디자인의 시각적 균형을 이루기위한 5가지 유형과 요인들에 대하여 다루고 있...
Category: 자료 - 웹개발, Reactions: 27, Views: 45,314, Author: 파이어준
-
순수 자바스크립트로 만들어진 로더 - spin.js
Felix Gnass씨가 배포한 spin.js는 추가적인 이미지나 CSS를 호출하지 않고 순수 자바스크립트만으로 만들어지는 로딩 알리미입니다. 특정 자바스크립트 라이브러리에 종속적이지 않으며, IE6에서도 사용할 수 있습니다...
Category: 자료 - 웹개발, Reactions: 5, Views: 138,806, Author: 파이어준
-
Nine Image Expander Thing
Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 ...
Category: 자료 - 웹개발, Reactions: 1, Views: 105,851, Author: 파이어준
-
커밋 트리 데이터 비주얼라이제이션
커밋 트리를 이용한 데이터 비주얼라이제이션 동영상입니다. 개발자의 커밋에 따른 프로젝트 구조의 변화를 시간의 흐름으로 보여주고 있습니다. 위 동영상은 PHP와 Python의 개발과정을 비주얼라이제이션하고 있...
Category: 자료 - 웹개발, Reactions: 11, Views: 102,152, Author: 파이어준
-
사이트 미니맵(아웃라인) 위젯 추가
jQuery.fracs은 현재 보고있는 페이지의 뷰포트(보여지는 일부분)와 상호 작용하여 특정한 요소들이 정해진 조건으로 뷰포트에 지속해서 노출될수 있도록 만들어주는 jQuery용 플러그인 입니다. 브라우저의 창 크기에...
Category: 자료 - 웹개발, Reactions: 3, Views: 76,908, Author: 파이어준
-
실시간 스타일시트 변동사항 자동반영 - Vogue
크로스-브라우저 이슈를 가지각색으로 안고있는 스타일시트를 다루는 작업은 클라이언트-사이드 개발자들을 매우 피곤하게 합니다. 코드를 수정하고 여러 브라우저에서 확인하고 다시 수정하고 확인하는 테스트...
Category: 자료 - 웹개발, Reactions: 8, Views: 66,624, Author: 파이어준
-
Cloud9 IDE 기능 확장하기
Cloud9 GitHub에 놀러갔다가 뭔가 심상찮은 변화가 있는 듯하여 "git pull" 때렸더니 소스가 주룩주룩 갱신됩니다. 서브 모듈들도 왕창 업데이트 되었더군요. 참고로 저는 devel 브랜치를 빌드해서 운용합니다. 로그인 기...
Category: 자료 - 웹개발, Reactions: 3, Views: 104,961, Author: 파이어준
-
Node.JS에서 컬러풀한 콘솔 디버깅을 - Clog 배포
Node.JS 코드를 다루면서 조금 아쉬운점 하나는 콘솔 디버깅이었습니다. 이게 console.log, console.info, console.warn 그리고 console.error를 구분하지 못하고 모두 일반 텍스트로 나오는 것이었습니다. 그래서 Socket.IO의 콘솔이...
Category: 자료 - 웹개발, Reactions: 8, Views: 53,321, Author: 파이어준
-
Socket.IO 학습 - 패킷을 절약하여 효율성 높이기
이전 학습에서 Socket.IO의 퍼블릭/브로드캐스트/프라이빗 전송 개념에 대해 알아보았습니다. 프라이빗 전송을 이용하면 특정 대상에게만 패킷을 소비할 수 있다는 사실을 알 수 있었죠. 이를 응용하여 이 번 시간에...
Category: 자료 - 웹개발, Reactions: 7, Views: 68,984, Author: 파이어준
-
Socket.IO 학습 - 퍼블릭/브로드캐스트/프라이빗 구분
퍼블릭/브로드캐스트/프라이빗 전송 개념은 Socket.IO를 사용하면서 익혀야할 중요한 서버-사이드 개념입니다. 퍼블릭(Public)은 발송자를 포함한 모든 클라이언트들에게, 브로드캐스트는 발송자를 제외한 다른 모든...
Category: 자료 - 웹개발, Reactions: 4, Views: 52,707, Author: 파이어준
-
Socket.IO 사용시 집고 넘어야 할 한 가지
웹소켓과 폴링(polling)방식의 소켓이 공존하는 Socket.IO를 사용해 보면서 간과해서는 안될 점에 대해서 별도의 포스트로 작성합니다. 이전 포스트에 작성한 내용이지만 주제와 무관하여 다시 작성했습니다. 지금까...
Category: 자료 - 웹개발, Reactions: 10, Views: 67,117, Author: 파이어준
-
Socket.IO 0.8.2 릴리즈 - MozWebSocket 지원
Socket.IO는 요 며칠간 하루 간격으로 메이저, 마이너 업데이트를 정신없이 하고 있습니다. 수정/보완이 필요한 변동사항은 없다고 합니다. 조금 살펴보니 0.8.2부터는 파이어폭스 6에 실험적으로 들어가 있는 웹소켓...
Category: 자료 - 웹개발, Reactions: 1, Views: 94,610, Author: 파이어준
-
WebGL 쉐이더 데모 - 순회하는 물결들
Felix Woitzel씨가 만든 놀라운 WebGL 데모입니다. 그는 쉐이더를 이용하여 l-시스템, 프랙탈 끌어당기기와 같은 데모들을 만들어 내고 있습니다. 아래의 데모역시 그가 최근 작업한 것이며, 그래픽 카드에서 실행되는...
Category: 자료 - 웹개발, Reactions: 3, Views: 93,962, Author: 파이어준
-
CSS3로 만든 금속질감을 표현한 버튼
CSS3를 이용하여 다양한 시도를 즐기는 Simon씨는 또다시 CSS3를 이용하여 놀라운 것을 만들었습니다. 이번에는 금속질감을 표현한 버튼들입니다. 아래에 출력된 결과물은 CSS3의 repeating-gradient 속성과 텍스트 그리고...
Category: 자료 - 웹개발, Reactions: 5, Views: 51,450, Author: 파이어준
-
Node.JS용 MVC 프레임워크 Express - 문서 번역
Node.JS용 MVC 프레임워크인 Express를 사용해 보면서, 쓰면 쓸수록 잘 만들었다는 생각이 들어 학습에 목적을 둔 날번역을 주말내내 진행했습니다. 생각보다 양이 많지 않아 약 50% 정도 진행되었으며, 주중으로 마무리...
Category: 자료 - 웹개발, Reactions: 16, Views: 179,916, Author: 파이어준
-
Cluster를 이용한 Node.JS의 멀티-코어 서버 관리
얼마전 LearnBoost에서 개발한 Cluster라는 Node.JS용 모듈을 알게되었습니다. 이 모듈은 노드 애플리케이션을 멀티-코어로 구동시켜 줍니다. 마스터, 워커로 간단하게 구성된 계층구조를 가지며 워커는 하나의 물리적인...
Category: 자료 - 웹개발, Reactions: 7, Views: 91,441, Author: 파이어준
-
리얼타임 서버 스테이트 비주얼라이제이션
지난번에 소개한 Jason Davies씨의 websocket-activity-monitor 소스 리파지토리를 포크해서 재구성해보았습니다. 이것은 실시간으로 서버의 활성상태를 모니터링하는 프로젝트입니다. iostate에서 흘려주는 정보들을 조금더...
Category: 자료 - 웹개발, Reactions: 12, Views: 73,938, Author: 파이어준
-
Node.JS로 만든 실시간 시스템 활동 상황 모니터
Node.JS로 만들어진 프로젝트들을 돌려보는 기쁨에 푹빠져 살고 있습니다. 서버를 운영하다 보니, 시스템 활동 상황이 궁금해서 시스템 활동 상황을 모니터링하는 프로젝트가 있나 싶어 찾아봤더니, node-websocket-act...
Category: 자료 - 웹개발, Reactions: 5, Views: 204,012, Author: 파이어준
-
firejune.io 도메인 구입과 HTTP 프록시 구성
firejune.io 도메인을 구입했습니다. nic.io 도메인은 국가 도메인으로 영국령 인도양식민지의 공식 국가 도메인입니다. 국가 도메인을 구입할 수 있는 가비O에서 등록시 1년 유지비용이 22만원(VAT포함)으로 상당히 비...
Category: 자료 - 웹개발, Reactions: 1, Views: 128,052, Author: 파이어준
-
Cloud9 IDE 개발 브랜치 버전 설치하기
Cloud9은 ajax.org에서 Node.JS를 이용하여 구축한 웹기반 IDE(integrated development environment, 통합 개발 환경)입니다. GitHub와 연동되는 자체 서비스도 있긴 하지만, 오픈 소스이기 때문에 개인서버에 설치해서 사용해도 무방...
Category: 자료 - 웹개발, Reactions: 3, Views: 91,639, Author: 파이어준
-
리얼타임 웹 애널리틱스 - Hummingbird
Hummingbird는 리얼타임 웹 트래픽 분석 도구입니다. 방문자가 트래픽을 발생하면 현재 상황을 실시간으로 모니터링 할 수 있습니다. Node.JS와 Socket.IO 그click to start리고 MongoDB를 이용하여 만들어 졌으며, WebSocket을 이...
Category: 자료 - 웹개발, Reactions: 14, Views: 137,729, Author: 파이어준
-
Socket.IO 0.7.8 업데이트와 삽질
여느때와 같이 Socket.IO를 열심히 가져놀다가 노드 패키지들을 너무 많이 설치했는지 ssh 콘솔이 버벅이는 느낌을 받았습니다. npm list 했더니 뭔가 위험해 보이는 시뻘건 글씨가 몇개 보여서 해당 패키지들을 지우고...
Category: 자료 - 웹개발, Reactions: 4, Views: 57,720, Author: 파이어준
-
오픈소스 멀티플레이 웹소켓 게임 - WPilot
WPilot은 Johan Dahlberg씨가 Node.JS로 구현한 멀티플레이를 지원하는 웹소켓 게임입니다. 100% 웹브라우저 기반으로 구동되며, 고전 게임인 XPilot, Thrust 그리고 Gravity Force에서 영감을 받았다고 합니다. 이 게임은 "proof-of-...
Category: 자료 - 웹개발, Reactions: 13, Views: 201,759, Author: 파이어준
-
Socket.IO를 이용한 리얼타임웹 구현하기
Socket.IO가 왜 크로스-브라우저를 지원하는지, 어떻게 구동되는지 이해하기 위해 소스를 살짝 들여다 보았습니다. Socket.IO에서 제공되는 이벤트 핸들러 외 nativeJSON 애뮬레이션 그리고 코드의 대부분이 통신 방식에...
Category: 자료 - 웹개발, Reactions: 12, Views: 141,455, Author: 파이어준
-
마우스 포인트 커뮤니케이터 - Smails
오래전 Jabbify용으로 만들었던 마우스 포인트 트래킹 커뮤니케이터에 기능을 보강하여 Socket.IO용으로 다시 만들어 보았습니다. 이 사이트에 접속한 사용자의 마우스 위치가 스마일 모양으로 공유되며, 다른 사용자...
Category: 자료 - 웹개발, Reactions: 6, Views: 50,399, Author: 파이어준
-
Node.JS와 Socket.IO를 이용한 웹채팅
웹소켓을 설치하려고 참 별짓을 다했습니다. jetty7쪽으로 방향을 잡았다가 웹소켓 서버 구현은 Node.JS가 효율적이라는 말에 솔깃하여 RPM으로 설치한 JDK, Jetty서버 다 지워버리고 안정적이라는 node-v0.4.10.tar.gz 받아서...
Category: 자료 - 웹개발, Reactions: 16, Views: 260,557, Author: 파이어준
-
CentOS에 Subversion 설치후 설정하기
이야~ 리눅스 서버가지고 삽질하는 재미가 쏠쏠합디다. 개발상 요긴하게 사용할 수 있는것들이 무궁무진하군요. 진작에 임대할걸 그랬어요. 이번에는 CentOS에 Subversion을 설치하는 것에 도전했습니다. 다행히도 한...
Category: 자료 - 웹개발, Reactions: 3, Views: 129,261, Author: 파이어준
-
가상서버호스팅 시작과 iRoute.mobi 재오픈
가상서버 호스팅이 있다는 사실은 알고있었지만 폭풍삽질의 기운이 엄습하여 감히 엄두도 못내고 있었습니다. 그러다 문득 iroute.mobi 도메인 사놓고 놀리기도 아깝다는 생각이 들었고, WebSocket 장난감 정도는 하나...
Category: 자료 - 웹개발, Reactions: 5, Views: 91,833, Author: 파이어준
-
자바스크립트로 SVG 지원여부 확인하기
푸하하! 결국에는 SVG 로고를 홈페이지에 적용했습니다. 위 화면은 적용후 파이어폭스 5에서 300% 확대하여 캡쳐한 화면입니다. SVG지원 여부를 판단하기 위한 스크립트를 서너개 찾았는데 그 중에서도 애플에서 사...
Category: 자료 - 웹개발, Reactions: 14, Views: 127,149, Author: 파이어준
-
네비게이션 메뉴에 SVG 적용한 애플홈
최근 홈페이지 리뉴얼 프로젝트를 중간에 인수받아 우여곡절 끝에 마무리하고 성공적으로 오픈했습니다. 안정화 기간이라서 여러 개선/교정/변경 사항들이 속출하고 있는 가운데 참 재미있는 항목이 하나 있었습...
Category: 자료 - 웹개발, Reactions: 23, Views: 97,045, Author: 파이어준
-
Reflow 원인과 마크업 최적화 Tip
CSS를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도...
Category: 자료 - 웹개발, Reactions: 0, Views: 26,593, Author: 파이어준
-
웹캠과 페이스 트래킹을 이용한 패럴랙스 효과
이번에도 웹캠을 이용한 페이스 트래킹을 이용하여 패럴랙스 효과에 적용해 보면 재미있겠다는 생각이 떠올라 만들었습니다. 얼굴인식을 시작하면 웹캠화면은 사라지고 현재 얼굴이 위치한 곳에 빨간 사각형이...
Category: 자료 - 웹개발, Reactions: 5, Views: 354,602, Author: 파이어준
-
웹캠을 이용한 페이스 트래킹
자바스크립트 얼굴인식 엔진을 이용하여 웹캠에서 출력되는 영상에 실시간 면상 추적 기능을 만들면 재미있겠다는 생각이 들어 급조해 보았습니다. Video conferencing API는 아직도 드래프트 상태더군요. 왠 뻘짓이냐...
Category: 자료 - 웹개발, Reactions: 5, Views: 43,831, Author: 파이어준
-
자바스크립트와 HTML5 Canvas를 이용한 얼굴인식
Devon Govett씨는 자바스크립트와 HTML5의 Canvas API를 이용하여 사진에서 얼굴을 발견하는 프로그램을 작성했습니다. iPhoto나 Picasa에서 제공하는 얼굴 감지 기능과 같은 것입니다. 얼굴을 감지해 내는 알고리즘은 C기...
Category: 자료 - 웹개발, Reactions: 11, Views: 80,143, Author: 파이어준
-
WebGL 레슨 5 - 텍스쳐에 대하여
다섯 번째 WebGL 레슨에 오신 것을 환영합니다. 이 학습은 "NeHe OpenGL의 여섯 번째 튜토리얼"을 바탕으로 하고 있습니다. 이번 레슨에서는 지금까지 만들었던 3D 오브젝트에 텍스처(Texture)를 입혀봅니다. - 별도로 준비...
Category: 자료 - 웹개발, Reactions: 7, Views: 36,414, Author: 파이어준
-
WebGL 레슨 4 - 실제 3D 개체
네 번째 WebGL 레슨에 오신 것을 환영합니다. 이번에는 실제 3D 개체를 화면에 그려봅니다. 이 학습은 "NeHe OpenGL의 다섯 번째 튜토리얼"을 기반으로 하고 있습니다. 다음 동영상은 이번 학습에서 만들어 볼 WebGL 컨텐...
Category: 자료 - 웹개발, Reactions: 10, Views: 31,645, Author: 파이어준
-
WebGL 레슨 3 - 회전 운동
세 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 2에 이어 이번 레슨에서는 객체가 회전 운동을 할 수 있도록 합니다. 이번 학습은 NeHe OpenGL의 네 번째 튜토리얼을 바탕으로 합니다. 다음 동영상은 이번 레슨에서...
Category: 자료 - 웹개발, Reactions: 4, Views: 35,960, Author: 파이어준
-
WebGL 레슨 2 - 색상 추가
두 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 1에서 만든 삼각형과 사각형에 색상을 추가하는 방법에 대하여 알아보겠습니다. 이번 학습 역시 NeHe OpenGL 세 번째 튜토리얼을 바탕으로 하고 있습니다. 다음은 학...
Category: 자료 - 웹개발, Reactions: 7, Views: 33,864, Author: 파이어준
-
WebGL 레슨 1 - 삼각형과 사각형
첫 번째 WebGL 레슨에 오신것을 환영합니다. 이 학습은 게임 개발자를 위한 3D 그래픽 학습 수단으로 인기가 높은 NeHe OpenGL 두 번째 튜토리얼을 바탕으로 하고 있습니다. 고작 삼각형과 사각형이라니, 어찌보면 흥미...
Category: 자료 - 웹개발, Reactions: 21, Views: 77,901, Author: 파이어준
-
체크박스 라디오버튼 스크롤바로 만든 게임 - BreakDOM
BreakDOM은 Hakim El Hattab씨가 만든 고전 게임인 블록깨기입니다. 스크롤바는 플레이어, 라디오버튼은 볼, 체크박스는 블록으로 삼았습니다. 기발하네요. jQuery 라이브러리를 사용하고 있으며, 자바스크립트 원본 소스...
Category: 자료 - 웹개발, Reactions: 12, Views: 50,269, Author: 파이어준
-
WebGL 레슨 0 - 시작하기
WebGL을 스스로 학습하기 위한 목적으로 Giles Thomas씨가 운영중인 Learning WebGL의 레슨을 번역하며 실행해 보기로 마음먹었습니다. Giles씨 역시 WebGL을 학습하기 위한 목적으로 시작한 레슨이라고 합니다. 여기에 소개...
Category: 자료 - 웹개발, Reactions: 28, Views: 84,587, Author: 파이어준
-
완전 무료, 고품질 손그림 아이콘 247종
177ICONS는 상업적 목적으로 사용해도 무방한 고품질 손그림 아이콘을 무료로 배포했습니다. 아이콘 포맷은 PNG이며 32x32, 128x128크기의 246종류 디자인으로 구성되어있습니다. 또한 PSD 파일도 함께 제공되기 때문에 용...
Category: 자료 - 웹개발, Reactions: 12, Views: 29,740, Author: 파이어준
-
요소들아 부들부들 떨어라! - jRumble
페이지내 모든 HTML 요소를 부들부들 떨게 만들어 주는 jQuery 플러그인인 jRumble을 소개합니다. 아래와 같은 옵션 수치를 조정하여 다양한 떨림 효과를 부여할 수 있으며, 마우스오버, 클릭, 마우스다운 이벤트 또는...
Category: 자료 - 웹개발, Reactions: 6, Views: 27,331, Author: 파이어준
-
Mr.doob씨의 WebGL 데모 - Clouds
Mr.doob씨가 최근 작업한 입이 쩍 벌어지는 데모입니다. 그가 배포한 three.js 라이브러리를 이용하였으며, Shader를 처리하는 방법을 엿볼 수 있습니다. 위 데모는 파이어폭스4, 사파리10.6, 구글 크롬10 이상에서 정상작...
Category: 자료 - 웹개발, Reactions: 12, Views: 30,351, Author: 파이어준
-
CSS의 "ime-mode" 속성에 대하여
CSS에서 특정 폼의 입력 요소에 "ime-mode"속성을 사용하면 사용자의 언어 전환 상태를 컨트롤 할 수 있습니다. IE5부터 추가된 이 속성은 W3C 표준은 아니지만 현재 파이어폭스 3 이상 그리고 웹킷 계열 브라우저(사파...
Category: 자료 - 웹개발, Reactions: 11, Views: 95,763, Author: 파이어준
-
웹 브라우저의 진화 - 인포그래픽
Andy Crofford씨는 브라우저 역사를 담은 인포그래픽을 배포했습니다. 초창기 시장 점유율을 86%나 차지했던 넷스케이프의 시대에서 MS가 인터넷 익스플로러를 윈도즈와 통합하면서 시장을 빠르게 잠식했으며 파이어...
Category: 자료 - 웹개발, Reactions: 17, Views: 29,788, Author: 파이어준
-
HTML5 스피치 인풋 API
지난 22일 구글은 블로그를 통해 당일 배포된 크롬 11버전(베타)부터 GPU 가속이 되는 3D CSS 지원 소식과 함께 HTML5 스피치 인풋 API를 지원한다고 밝혔습니다. 구글이 표준안으로 W3C에 제출한 이 API를 애플리케이션에...
Category: 자료 - 웹개발, Reactions: 17, Views: 52,491, Author: 파이어준
-
윈도폰7 IE의 조건부 코멘트
윈도폰7 기기에 탑재된 인터넷 익스플로러에만 적용되어 작동하는 트릭에 대하여 알고 있나요? 다음은 css-tricks에 제보된 윈도폰7의 IE에 적용되는 조건부 코멘트 사용방법입니다. 물론 미디어 쿼리를 이용하여 ...
Category: 자료 - 웹개발, Reactions: 7, Views: 37,875, Author: 파이어준
-
Float 속성의 높이 문제를 Overflow로 해결하는 방법
float 속성을 가진 컨테이너는 자식 요소의 높이를 무시하여 예상치 못한 결과를 출력하는 문제를 가지고 있습니다. 이 문제를 해결하기 위해 추가적인 요소에 clear 속성을 이용하는 방법이 있지만 overflow 속성을 이...
Category: 자료 - 웹개발, Reactions: 34, Views: 32,268, Author: 파이어준
-
CSS를 깨끗하게 포맷해주는 서비스 - ProCSSor
ProCSSor는 CSS 마크업을 예쁘고 깔끔하게 포맷해 주는 온라인 서비스입니다. 작성한 CSS코드를 ProCSSor에 붙여넣거나 업로드하거나 URL을 직접입력하는 방법으로 입력하고 옵션을 설정한 후 "procss" 버튼을 클릭하는 것...
Category: 자료 - 웹개발, Reactions: 22, Views: 30,664, Author: 파이어준
-
로그인 폼에 작성시 알아두어야 할 7가지 요소
Alen Grakalic씨는 완벽한 로그인 페이지 해부라는 이름의 포스트에 7가지 항목으로 구분하여 로그인 페이지에 필요한 요소들을 정리했습니다. 늘 다른 서비스의 로그인 페이지를 비교해 가며 작성하다가 참조할만한...
Category: 자료 - 웹개발, Reactions: 19, Views: 31,550, Author: 파이어준
-
Canvas 요소를 쉽게 다루는 jQuery 플러그인 - gury
Gury는 Canvas 요소를 이용하여 간단하게 개체를 렌더링하거나 애니메이션을 추가하고, 게임과 같은 인터랙션 컨텐츠를 손쉽게 구현할 수 있도록 도와주는 jQuery용 플러그인입니다. 사용 방법은 다음과 같습니다..
Category: 자료 - 웹개발, Reactions: 5, Views: 34,075, Author: 파이어준
-
원소 주기율표 형식의 HTML5 요소
HTML5 요소를 원소 주기율표 처럼 보여주는 서비스입니다. 상단 인풋에 URL을 입력하면 해당 사이트에서 참조되는 요소들이 강조됩니다. Root element,Text-level semantics, Forms,Tabular data, Metadata and scripting, Grouping content, Doc...
Category: 자료 - 웹개발, Reactions: 16, Views: 34,960, Author: 파이어준
-
프론트-엔드 엔지니어링
프론트-엔드 업무에 대해 논란이 되고 있는 듯하여 제가 경험한 것에 빗대어 노가리나 풀어보려고 합니다. 우리 회사에는 프론트-엔드라는 명확한 포지션이 있습니다. 처음부터 있던건 아니었지만 모던 웹을 개...
Category: 자료 - 웹개발, Reactions: 32, Views: 28,663, Author: 파이어준
-
HTML5 오디오 플레이어 - XEN
CSS3를 이용하여 umbrUI를 만든 Simon씨가 최근 작업한 음악 재생기인 XEN 플레이어입니다. jQuery 라이브러리와 jPlayer 플러그인을 기반으로 만들어 졌으며, 재생/일시정지 기능을 가지고 있습니다. CSS3를 이용하여 간결...
Category: 자료 - 웹개발, Reactions: 23, Views: 47,737, Author: 파이어준
