Hexo 블로그 이전완료

wordpress를 떠나 hexo로 블로그를 이전 완료.

Server는 DigitalOcean에서 Ubuntu node v4.1.0 on 14.04 로 신청후 맥에서 ssh로 접속해 모든 환경 설정을 진행하였다. 메일은 네이버웍스로 Mx Record를 설정했다.

세팅하면서 가장 만족스러웠던것은 DigitalOcean. 기존에 사용하던 국내 호스팅들과는 다르게 서버 권한에 대한 걱정없이 로컬서버를 세팅하듯 모든것이 가능했다. 서버도 싱가폴에 있다지만 속도도 전혀 문제없는 수준. 추후 각 단계별로 진행 사항을 상세히 블로깅 해보아야겠다.


151120 업데이트

  • IE9.js / respond.js를 사용해 IE9까지 테마 호환성 업데이트. IE8는 본문을 읽을 수 있을 정도로 지원.

CSS Filter Effects WebKit에 안착

기존에 FF에만 되던 CSS Filter기능이 드디어 웹킷 브라우저에도 적용되기 시작했다고 합니다.

1
img { -webkit-filter: grayscale(0.5) blur(10px);}

위와 같은 코드로 간단하게 필터 기능을 사용할수 있습니다. <video>,<canvas>등 거의 모든 DOM요소에 적용가능하다고 하며 graysale, sepia, invert, blur등 다양한 효과를 지원합니다.

예제
http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit
( 크롬 Alpha 버전급인 Chrome Canary 와 WebKit nightlies 에서 확인할수 있습니다).

W3C 문서
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

원문출처
http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit

윈도우8 과 IE10 개발자 프리뷰 버전 출시

Windows 8 개발자 프리뷰 버전이 공개되면서 IE10도 같이 공개가 되었는데요 IE10에서 주요 변경점은 당연히 지원됬어야 했었지만 포함되지 않아 IE9때 비난의 대상이 되었었던 HTML5/CSS3 기능들에 대한 지원들이 추가되었습니다.

아 참고로 IE10은 참으로 안타깝게도 VISTA도 사용 불가능하며 윈7/윈8에서만 돌아갑니다. 떨어져만 가는 IE점유율을 OS 판매의 도구로 잘 활용할지 아니면 둘다 추락할지 지켜봐야할듯 하네요.

  • 현재는 IE10만 따로 깔아볼수는 없고 Win8 프리뷰버전을 깔아야지만 확인해 볼 수 있습니다. 뭐 이제는 당연하겠지만 큰 레이아웃 표현의 차이는 없는듯 하네요.(어디에 어떻게 숨어 있을진 모르지만);;;

  • 참고로 Win8에 대해서는 Win7에 비해 타블렛 PC에 최적화된 OS로 개발이 되고 있습니다.

 

IE에 추가된 HTML5/CSS3 요소들 · 시각효과들 : CSS Text Shadow, CSS 3D Transforms, CSS3 Transitions and Animations, CSS3 Gradient, SVG Filter Effects
· 페이지 레이아웃을 위한 : CSS3 for publication quality page layouts and application UI (CSS3 grid, flexbox, multi-column, positioned floats, regions, and hyphenation), HTML5 Forms, input controls, and validation
· 향상된 웹 개발 모델들 : Better offline applications through local storage with IndexedDB and the HTML5 Application Cache; Web Sockets, HTML5 History, Async scripts, HTML5 File APIs, HTML5 Drag-drop, HTML5 Sandboxing, Web workers, ES5 Strict mode support.

IE10의 추가된 요소들에 대한 마소 블로그 설명 원문 http://blogs.msdn.com/b/ie/archive/2011/09/13/ie10pp3.aspx

Windows8 Developer Preview 버전(IE10포함) ISO파일 받기 - 각종 가상화 프로그램 혹은 다중OS설치로 설치해볼수 있습니다. http://msdn.microsoft.com/en-us/windows/apps/br229516

IE10에 추가된 요소들 데모페이지 http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

IE10 성능체크 Test Drive http://ie.microsoft.com/testdrive/Default.html

CSS3 에니메이션 툴 모음

CSS3의 경우 각종툴을 이용한 활용이 많을것으로 보이는데요 이중에서 CSS3를 활용한 에니메이션 효과를 다루는 어떤 툴들이 나와있고 준비중인지 한번 정리해 보았습니다.

아직은 이러한 툴들이 CSS3의 지원에 관한 PC의 경우 하위 호환 문제가 있고 모바일에서도 안드로이드쪽에서 지원되지 않는 속성들도 있지만 시간이 흐르면 웹 작업의 큰축을 담당할것 같습니다. 솔직히 하드코딩으로 각 수치를 계산해가며 작업하는건 비효율적이죠.

조금 사용해본 결과 이러한 타임라인 기반의 Animation 툴들이 배너나 프로모션 작업에 상당히 유용해 보였습니다. 아직은 초기 버전들이라 소스모드나 부족한 점이 많지만 초기 버전임에도 불구하고 꽤 활용가치가 있어 보였습니다. 왠지 다음 버전의 Dreamweaver에도 어느정도 이런 기능들이 추가되지 않을까 싶네요.

 

1. Adobe Edge (Preview버전) - Win/Mac 지원

특징 : Adobe에서 나온 툴로서 기존에 Flash 타임라인을 만저본 분이시라면 쉽게 적응할 수 있을 듯합니다. CSS3와 jQuery를 활용한 결과물로 산출해줍니다.
http://labs.adobe.com/technologies/edge/

Sample:http://labs.adobe.com/technologies/edge/resources/ Download:https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_edge (간단한 가입후 다운)

2. Sencha Animator (Beta1 버전) - Win/Mac/Linux 지원

특징 : 모바일 UI 플랫폼 센차 Touch로 유명한 Sencha에서 만든 에니메이터.
http://www.sencha.com/products/animator/

Demo: http://www.sencha.com/products/animator/demos/ Download:http://www.sencha.com/products/animator/download/ (실행시 간단한 가입 필요)

3.Hype (1.05버전)

특징 : 가장 처음 상용화한 툴로 보이며 Mac 전용. 현재 29.99달러에 판매중. 아직 사용해보진 못했지만 스크린샷에 보면 다른 툴과는 다르게 소스수정 모드도 존재.
http://tumultco.com/hype/

Sample: http://tumultco.com/hype/gallery/ Download: http://itunes.apple.com/us/app/hype/id436931759?mt=12&ign-mpt=uo%3D4

4. Animatable (출시준비중)

특징 : 안드로이드/블랙베리/iOS/WebOS등의 모바일 디바이스 호환 예정

http://animatable.com/

 

* 뱀꼬리 CSS3 속성 생성도구 페이지 모음

구글링을 조금하면 나오는 페이지중에 유용했던 페이지들을 모아봤습니다. 더 좋은 사이트가 있으면 공유 부탁드려요~! ^^

http://matthamm.com/box-shadow-curl.html (박스쉐도우를 이용한 이쁜 효과)
http://www.colorzilla.com/gradient-editor/ (그라데이션 생성 툴. 직접 생성도 가능하며 PSD에서 그라데이션을 이쁘게 잘라서 업로드 하면 색정보를 추출하여 CSS3로 변환도 시켜줍니다)
http://css3maker.com/ (종합선물세트)
http://layerstyles.org/builder.html (포토샵 속성 스타일의 레이어 스타일 툴)
http://prefixr.com/ (CSS3의 Prefix 자동 생성툴)
http://matthewlein.com/ceaser/ (easing 효과 생성기)

 

[공유] iOS5에서 모바일 사파리 관련 변경점

iOS5에서 모바일 사파리 관련 변경점이 있어서 공유드립니다.
영문 자료 이나 제목과 천절히 테스트 동영상까지 있네요.

간략 정리
1. bad news - (input type=”file”)이 여전히 포함되지 않음
2. position:fixed 추가
3. overflow:scroll 가능
4. date,datetime,month.time,range의 input타입에 입력스타일(어플과 동일한) 지원.
5. iOS3 초기 버전이후로 사라졌던 webworkers의 재등장

overflow:scroll이 지원되나 아쉽게도 투핑거로 되던 기능이 원핑거로 가능해진 정도이며 여전히 기본적으로 스크롤바 노출이 사용자가 해당 부분이 스크롤 영역인지를 확인할 수 있는 외형적 변화가 없어서 아쉽네요. 이 부분은 여전히 스크롤바를 표시해주려면 js의 힘이 필요할 듯 합니다.

http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5

인접한 img/input요소와 텍스트와의 세로정렬

마크업을 배울대 막 초급을때고 중급으로 들어오면서 마크업할때마다 헷갈렸던게

img와 input들과 인접한 텍스트들의 세로 정렬 문제였다. 단순히 vertical-aling:middle이 아니라 1px씩 조절해줘야하는 상황도 있엇는데 그럴때마다 해결은 하는데 항상 할때마다 다시 생각해내고 했던적이 한두번이 아니어서 시간이 생겨 한번 해당 사항을 정리해 보았다.

block과 inline의 특성을 모두 가진 display:inline-block을 쓰고 요소들을 vertical-align으로 정렬후 margin에 음수값으로 조절한다. 인접한 요소의 크기에 따라 부모 높이에 영향을 주니 잘 고려하자.

문서보기