박종명의 아름다운 개발 since 2010.06

드롭 이벤트에서(onDrop)에서 외부 파일을 드롭했을 때 그 정보를 취득하기 위한
다음의 코드가 사용되며  event.dataTransfer.files[0],

이렇게 전달된 파일 데이터를 읽기 위해 FileReader(File API 중 파일을 읽기 위한 객체)를 사용했다
FileReader의 Load 이벤트에서 드롭으로 전달된 파일정보를 읽어 들여 이미지 혹은 텍스트를 DIV 에 출력하는 것이다
> 이미지 읽기: reader.readAsDataURL(file);
> 텍스트 읽기: reader.readAsText(file,"EUC-KR");

아래 그림은 데모를 실행한 결과모습인데, 텍스트 파일과 이미지 파일을 드롭한 후 또 다른 이미지 파일을 드롭하기 위해 웹페이지로 옮기는 모습니다. 전체 코드이기에 직접 실행해 보기 바란다.
소스나 기능이 최적화 되지는 않았지만 응용을 위한 기본자료로써는 충분할 것이다

이전 글에서 소개한 RGraph 와 유사한 라이브러리를 소개한다
jQuery 의 플러그인 형태로 제공되는 Visualize 라이브러리 이다

HTML5 그래픽 관련 툴을 찾던 중 알게 된 이들 라이브러리는 아주 유용하며 안정감 마저 든다
아직 표준안이 완성되지 않은 기술에 기반 라이브러리가 먼저 등장하는 점은 HTML5를 선호하는 사람에게는 매우 고무적이라 볼 수 있겠다

Visualize 역시 HTML5 의 Canvas 를 통해 차트를 표현하며 jQuery 기반으로 동작한다

RGraph 가 그래프 및 차트에 이용되는 데이터를 스크립트를 통해 RGraph 객체로 정의하는 반면,
Visualize 는 HTML 테이블에 정의된 데이터를 자동으로 분석해서 차트로 변환해 주는 특징이 있다
또한 RGraph 처럼 브라우저 호환성을 위한 장치가 마련되어 있다

직접 테이블의 데이터를 수정하면서 차트의 변화를 확인할 수 있는 다음의 링크로 이동해 보자
http://www.filamentgroup.com/examples/charting_v2/

그리고 라이브러리 소개 페이지이다
http://www.filamentgroup.com/lab/
update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

HTML5 의 Canvas 를 이용해서 각종 그래프를 만들어 주는 라이브러리이다

비 상업적 사이트일 경우 무료로 사용 가능하다
(상업적 사이트일 경우 소정의 수수료를 요구하는 것 같다)

바차트, 도넛차트, 파이차트, 간트차트, 로즈차트 등 다양한 형태의 차트를 지원하며 도움말이 충실히 제공되어 쉽게 사용할 수 있다. 그래프 표현 뿐만 아니라 줌기능, 컨텍스트 메뉴 등록, 비동기 출력, 애니메이션 효과 등 2D 그래픽과 관련한 유용한 기능들도 구현되어 있다

그리고 예제를 보면 Canvas를 지원하지 않는 브라우저를 위한 코드 즉 IE8 의 Canvas 적용을 위한 ExplorerCanvas 와 구글 프레임을 적용하는 등 브라우저 호환성을 신경 쓴 모습이다
 
이 사이트에서 공식적으로 소개하는 브라우저 지원 목록은 아래와 같다
- Mozilla Firefox 3.0+
- Google Chrome 1+
- Apple Safari 3+
- Opera 9.5+
- Microsoft Internet Explorer 8+ (see note)

현재 시점에서(2010.09.14) 최종 릴리즈 버전으로 2010.08.28일자가 등록되어 있으며 최종 베타버전으로는 2010.09.11자가 올라와 있다.

캔버스기반의 그래프라이브러리로 훌륭한 선택이 될 수 있을것 같으며 꼭 적용하지 않더라도 캔버스를 이용한 그래픽 작업을 하는데 있어 좋은 학습 자료가 될 수 있을 것 같다
아래의 사이트에서 자세히 확인해 보도록 하자
http://www.rgraph.net/

크로스 브라우저 스토로지 (크로스 브라우저 쿠키)
HTML5 에 새로 추가된 Web Storage 는 쿠키와 유사하지만 조금 더 진보된 형태의 클라이언트 저장소를 지원한다. Web Storage 는 영구데이터를 위한 localStorage 와 세션 범위의 SessionStorage 로 나뉘어진다. 자세한 내용은 다음의 글을 참고 바란다
=> [HTML5] Web Storage

localStorage 에 관련한 다음의 질문에 답해 보기 바란다

'크롬 브라우저에서 저장한 localStorage의 값을 사파리 브라우저에서 조회할 수 있는가?'

금방 답 할 수 있으면 일단 다행(?)이다. 그럼 이 질문은 어떤가?

'IE 브라우저에서 저장한 쿠키(Cookie)를 크롬 브라우저에서 조회할 수 있는가?'

이 두 질문은 동일한 이슈를 다루고 있다. 즉 '크로스브라우저(Cross Browser)' 이슈이다
크로스 브라우저는 각기 다른 브라우저 환경을 말하며, '크로스 브라우저 가능' 이라는 말은 브라우저가 달라도 기술의 구현이나 사용은 동일(일관)하다는 의미로 해석된다

다시 질문으로 돌아가 보자
HTML5의 localStorage 까지 갈 것도 없이, 쿠키(Cookie)의 크로스 브라우저 문제를 생각해 보자. 
'각기 다른 브라우저(크롬,사파리,파이어폭스,오페라 등)에서 쿠키의 공유가 가능한가?' 하는 문제이다

좀 더 현실적인 예로 다시 풀어 보면,
'쿠키로 사용자 인증 처리를 하는 사이트의 경우 IE에서 로그인한 사용자가 크롬에서 해당 사이트에 접근했을 때 로그인이 유지되는가?' 하는 문제이다

이전에 한번이라도 이와 유사한 이슈를 경험해 본 사람은 쉽게 답할 수 있을 것이다
그러나 모르긴 몰라도 꽤 많은 사람이 헷갈려 하지 않나 싶다(이 글을 쓰는 나 역시 헷갈렸다 ㅡ.ㅡ)


크로스브라우저 쿠키의 착각, IE 의존성이 가져온 결과?
고민(?)의 발단은 이러했다
HTML5의 localStorage 를 위한 저장소는 각 브라우저별로 서로 다른, 즉 자신만의 위치에 데이터를 저장하기 때문에 '크로스 브라우저 스토로지'가 지원되지 않는다는 자연스러운(?) 결론에 이르게 되었다

그러나 한편 생각해 보면 여러 브라우저를 사용하는 사람에게는 꽤 문제가 될 수 있지 않나 싶었다
기껏 유용한(또는 주요한) 정보를 localStorage 에 저장해 뒀는데 다른 브라우저로 접근하면 사용할 수 없다는 것은 사이트 개발자는 물론 사용자의 불편을 야기시킬 수 있기 때문이다

이즈음 든 생각은, '그럼 쿠키는?' 이었다
여기서 나의 착각이 시작되었다. 순간 당연히 쿠키는 크로스 브라우저가 된다고 생각한 것이다
'쿠키는 크로스브라우저가 가능한데 쿠키의 개선 버전이라는 localStroage 가 안되다니?'
'이건 뭐 제약사항이 하나 더 늘었구만!!' 하는 어처구니 없는 착각 ^^;

하지만 웹 실무를 벗어난지 꽤 오랜 시간 되었고 이건 착각일 수도 있겠다라는 의문이 들어 테스트를 해 보기로 했다.

테스트 결과, 당연히 될 줄로만 알았던 '크로스 브라우저 쿠키'가 안되는 것이었다
음.. 이건 뭥미? 하며 잠시 멍 때린 후, 생각을 정리하기로 했다

'그래, 쿠키가 표준이지 쿠키 저장소가 표준은 아니다' 라는 것이다

즉 웹을 위한 클라이언트 측 데이터 저장소로써 쿠키라는 개념이 통용되지만 그 저장 위치는 정해져 있지 않다는 것이다. 곰곰히 생각해 보면 저장 위치를 딱 한 곳으로 표준화 할 수도 없다는 것이다

이러한 나의 착각은 어디에서 비롯되었을까? 하고 생각해 봤더니, 'IE 의존적인 개발로 인한 착각' 이라는 생각이 들었다.(물론 제대로 알지 못한 나 자신이 1차 문제인건 안다 ㅡ.ㅡ)

내가 한참 웹 개발 실무를 디테일하게 수행했던 시기는 2000년대 초반이었으며 그 당시에는 지금보다 훨씬 더 IE 의존적인 환경이었다. 웹 2.0 이라는 트랜드도 낯설었거니와 몇몇 독특한 사람을 제외하고는 거의 대부분의 사람이 IE를 사용하고 있었으며 웹 표준이라는 개념 역시 지금처럼 일반화되지 않는 시기였다. 따라서 대부분의 웹 개발은 IE 를 기준으로 작성되었으며 크로스브라우저 테스트는 거의 해 보지 않았다는 것이다. (간혹 여러개의 브라우저를 띄워서 데이터 공유가 되는가.. 하는 등의 테스트는 해 보았지만, 이것 역시 IE를 여러개 띄운 테스트가 대부분이었다)

결국 IE 의존적인 개발은, IE 에 한정된 테스트 환경에 그쳤으며 IE 적 개념이 점차 정립된 것이다
'크로스브라우저 쿠키의 착각'도 이러한 IE 의존성에서 비롯되었다라고 해도 과언은 아닐 듯 싶다
(물론 제대로 된 조직 및 개인은 그 당시에도 크로스 브라우저 테스트및 개념이 있었겠죠?
 이 글은 저의 경우, 저의 착각에 한해 예기 하는 것이니 오해 사절 입니다)

지금에야 아이폰을 필두로 한 모바일 웹의 급 부상, 이미 오래된 웹 2.0 트랜드, 웹 표준 이슈, HTML5 등장, 과거와는 다른 브라우저간 경쟁 및 발전으로 IE 의존성이 점차 해소되는 분위기이며 특히 개발자들은 더욱 다양한 브라우저를 체험하고 있다. 

사실  나 역시 모바일 웹, HTML5에 관심을 두기 전에는 거의 IE만 사용했었다
근래 들어 크롬, 사파리, 파이어폭스, 오페라와 같은 브라우저를 동시에 사용하고 있다. 
이 글 역시 여러 브라우저를 동시에 사용했기에 든 의문이며 그렇지 않다면 꽤 오랜시간 착각과 망각속에 살지 않았겠나.. 싶다


크로스 브라우저 쿠키, 크로스 브라우저 스토로지, 가능한 시나리오는 없는가?
브라우저를 넘나드는 클라이언트 데이터 저장소의 실현을 고민해 보자

크로스 환경이 필요한가를 먼저 따지자
우선 원론적인 질문을 해 보자. '브라우저 경계를 넘어서는 데이터 공유가 필요한가?' 이다
다시 말해 IE에서 저장한 데이터를 크롬에서 불어와야 되는가? 하는 것이다
예를 들어 IE에서 로그인한 사용자가 크롬에서도 여전히 로그인이 되어 있어야 하는가? 이다
매우 크리티컬한 이슈가 아니라면 적당히 양보(?)할 수도 있을 것이다
크로스 브라우저가 정말로 필요한지? 서버측 데이터 공유로 풀어도 되지 않는지? 하는 원론적인 고민을 해 보고 반드시 그럴 필요가 없다면 굳이 크로스 환경을 지원하지 않아도 된다는 말이다
그러나 반드시 크로스 환경이 보장되어야 한다면 다음 글로 넘어가자

브라우저마다 각각 저장하자
불편하기는 하지만 가장 심플한 해결책이다
매번 브라우저에서 쿠키가 존재하는지 검사하고 없다면 쿠키를 기록하는 것이다
예를 들어 IE에서 쿠키를 저장하고 크롬에서 쿠키를 읽어 올때 존재하지 않는다면 다시 쿠키를 기록하도록 하는 것이다. 다른 브라우저도 마찬가지로.
사용자 인증 시나리오에서 이 기법이 적용된다면 사용자는 브라우저를 교체할 때 로그인을 다시 해야 하는 불편은 감수해야 한다. 그러나 용납할 만한 수준이지 않는가
(이 시나리오는 HTML5 localStorage에도 그대로 적용된다)

플래시의 Shared Object 를 이용하라
플래시에는 클라이언트 측 데이터 저장과 공유를 위한 Shared Object 라는것이 존재한다
플래시 런타임은 브라우저와는 별도의 플러그인 환경이기 때문에 브라우저가 달라진다고 해서 문제될 것이 없다. 다만 플래시 런타임이 브라우저에 설치되어 있어야 한다는 문제가 있다
웹 표준, 특히 아이폰과 같은 모바일 환경에서는 무리수 일 수 있다는 것이다

PersistJS 라이브러리를 이용하라
Paul Duncan 이라는 사람이 만든 라이브러리이다. 클라이언트 측 자바스크립트 영구 저장소를 구현한 것이다. 플래시 플레이어와 같은 별도의 플러그인이 필요 없으며 크로스 브라우저를 지원하는 API가 제공된다. 이 라이브러리를 직접 이용해 보진 않았지만 아마 locaStroage나 Shared Object 와 같은 기존 스토로지 솔루션에 기반하여 데이터를 저장하며 크로스 브라우저를 위한 자동화된 처리가 포함된 듯 하다. 관심 있는 자 테스트 해 보기 바란다. 아래 주소에서 라이브러리 다운로드 및 확인이 가능하다.
http://pablotron.org/?cid=1557

transform

Rotate (회전 효과)
개체를 주어진 각도로 회전 시킬 수 있다
각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다
참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다

-webkit-transform: rotate(45deg);

이미지에 마우스를 올렸을때 skew효과로 이미지가 기울어지는데 이때, Transition 의 대상 CSS속성이transform으로 지정되어 있기 때문에 기울이는 과정이 2초에 걸쳐 부드럽게 전개되는 것이다.
서서히 움직이는 실행화면을 여기서 보여주기 힘드니 직접 테스트를 해보기 바란다


데모 사이트 소개
Transform 에 대한 효과를 강하게(?) 체험하고 싶다면 다음의 사이트를 방문해 보기 바란다
http://www.westciv.com/tools/3Dtransforms/index.html

Transform 관련 수치와 각도를 직접 설정하면서 각종 변형을 확인 할 수 있어 매우 직관적이다
그리고 이 글에서 주로 설명된 X,Y 축 기반의 2D Transform 외에 Z 축을 기준으로 하는 3D Transform 의 예도 살펴 볼 수 있다. 다만 3D Transform 은 2D에 비해 더 제한적인 브라우저 지원이 있다는 것을 기억하기 바란다. 아래 그림은 이 사이트 화면을 캡쳐한 것이다

1) transition-property
색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color
transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다

2) transition-duration
A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s
이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다

3) transition-delay
변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s
스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다

4) transition-timing-function
Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다
cubic-bezier(0.2, 0.4, 0.7, 0.8)

큐빅 베지어 값을 이해하기 위해 다음 그래프를 참고 하자
다섯 가지 값의 변화를 직접 눈으로 볼 수 있는 데모가 제공되며 이 중 그래프만 발췌했다
http://www.the-art-of-web.com/css/timing-function/


Timing Function Control Points(W3C 발췌)


Transition 사용법 및 (브라우저별) 접두어
Transition 효과를 주기 위해서 앞서 설명한 4가지 속성을 따로 지정하거나 한 줄에 모두 지정할 수 있다 즉 다음의 두 설정은 동일한 것으로, 개체의 투명도(opacity) 속성을 2초에 걸쳐 변하도록 한다
그리고 변화를 시작하기 전 1초를 대기시키는 예이다

한줄 설정>
 transition: opacity 2s 1s ease

각 속성을 따로 정의> 
 transition-property: opacity;        
 transition-duration: 2s;      
 transition-delay: 1s;    
 transition-timing-function: ease;

그리고 몇몇 CSS3 새 특성들과 같이 Transition 역시 그 스펙이 완성된 것이 아니라서 브라우저별 임시 특성을 이용해야 한다. 즉 아래와 같이 브라우저에 따른 접두어를 붙여야 한다
- 웹 킷 기반 브라우저(크롬, 사파리): -webkit-transition
- 파이어폭스: -moz-transition
- 오페라: -o-transition

Transition 의 간단한 예
Transition 을 이용해 CSS 스타일이 부드럽게 변화하는 간단한 데모를 만들어 보자
앞서 설명한 내용인데, 이미지의 투명도를 변화시키는 예이다

기본적으로 이미지가 최초 로딩될 때는 완전 불투명 상태이다(기본 상태 Opacity=1)
Transition 을 이용해 1초 후 투명도를 변화시키는데 총 2초에 걸쳐 투명도가 0.2이 되도록 한다

이후 이미지의 투명도 변화는 Transition 조건에 영향을 받게 되는데,
마우스가 이미지 위에 올라오는 hover 상태에서 투명도를 1로 다시 변화시킨다
이 변화 역시 Transition 조건에 의해 hover된 뒤 1초 후 변화가 시작되어 총 2초에 걸쳐 완정불투명상태로 서서히 변화한다

<img id="hello" src="son.bmp">

<style>
img {      
opacity: 0.2;    
-webkit-transition-property: opacity;       
-webkit-transition-duration: 2s;     
-webkit-transition-delay: 1s;   
-webkit-transition-timing-function: ease;
}  

img:hover {      
opacity: 1;  
}
</style>

브라우저에서 데모를 실행을 해 보면,
이미지가 로딩 되고 1초 후 부터 서서히 투명해 지기 시작한다.
총 2초에 걸쳐 투명도가 0.2가 될 때까지 진행된다. 그리고 이후 이미지에 마우스를 올리면 또 다시 서서히 이미지가 밝아 진다(완전 불투명이 될 때까지)

è

 
변경 대상이 되는 CSS 속성을 하나 이상 지정할 수도 있는데,
앞의 데모의 투명도와 더불어 크기도 Transition 대상 속성이 되도록 해 보자

아래와 같이 코드를 수정하였다. 한줄로 단축해서 표현했으며 Opcity, width 속성이 Transition 대상이 되도록 하였다. 그리고 width 변화는 1초동안, opacity 변화는 3초 동안 진행되도록 하였다. 이렇게 하면 최초 로딩시 그리고 마우수 horver 시 서서히 이미지가 커지면서 밝아지는 효과를 줄 수 있다.

<style>
img {      
opacity: 0.2;    
width: 150px;
-webkit-transition: width 1s ease-out, opacity 3s ease;
}  

img:hover {      
opacity: 1;  
width: 300px;
}
</style>

è

이렇게 두 개 이상의 CSS속성을 Transiction 대상으로 지정할 수 있는데,
예에서 처럼 각각의 CSS속성에 다른 조건을 주거나 다음처럼 한꺼번에 같은 조건을 줄 수도 있다
-webkit-transition: all 3s ease;


Transition정리
Transition을 이용해 에니메이션 같은 스타일 효과 주기 위해 다음의 것들을 이해하면 된다

1) 변경될 스타일의 대상
어떤 속성에 변화를 줄지를 결정하는 것이다. CSS 속성 중 어떤 속성이 변화의 대상이 되는가 하는 것이다. 앞서 예에서는 이미지의 너비(width)와 투명도(opacity) 이 그 대상이 되었다
즉 하나 이상의 CSS 속성을 Transiction 대상으로 지정할 수 있다

2) 스타일의 처음 상태와 변경된 상태
Transition은 CSS 속성을 변화시켜 스타일 효과를 주는 것이다
따라서 속성이 변화되기 전 처음 상태 값과 변경된 후 상태 값에 대한 이해가 있어야 한다
앞서 예에서는 img 전체에 Transition효과를 주었다. 이럴 경우 처음 상태는 이미지가 처음 로딩될 때 브라우저가 적용하는 기본 값이 처음값이다.

즉 앞 예에서의 최초 상태는 투명도 1, 크기 0 이며 이미지가 로딩 된 후 투명도 0.2, 크기 150px가 되었다. 그리고 hover 될 때 처음 상태는 바로 직전 상태에서 hover 스타일 값으로 서서히 변경되는 것이다

3) 기타 조건
Transition 설정을 통해 시작 전 대기 시간(초), 총 걸리는 시간(초) 등 세부 조건을 지정하면 된다

CSS의 에니메이션 효과과 관련된 예는 직접 실행 해 보는 것이 좋다
앞 데모도 직접 브라우저에서 그 동작을 확인해 보기 바란다


클릭에 반응하여 움직이는 이미지 만들기
마지막으로 Transition을 이용해 움직이는 이미지 효과를 만들어 보고 글을 마치도록 하겠다
CSS의 속성 중 margin-left 속성의 변화를 통해 이미지의 위치를 조정하는 예이다

Transition 에서는 margin-left 의 변화에 반응하도록 지정하며
개체의 className 속성을 이용해 스타일의 상태 변화를 유도하게 된다
이 데모는 구글의 html5rocks 을 참고한 것이다

<img id="myImage" src="son.bmp">
.....
<style>
img {      
-webkit-transition: margin-left 1s ease-in-out;
}  
img.left {
 margin-left: 0;
}
img.right {
 margin-left: 780px;
}
</style>
<script>
var content = document.querySelector('#myImage');
content.addEventListener('click', function() { 
  if (this.className == "right") {
    this.className = "left";
  }
  else {
    this.className = 'right';
  }
}, false);
</script>

데모를 실행 하고 이미지를 클릭하면 좌/우로 이미지가 이동하는 것을 확인할 수 있다

참고>
http://www.w3.org/TR/css3-transitions/
http://css3.bradshawenterprises.com/#how2transitions
http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/

CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다

엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다
그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다
그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다

어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다
(뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...)

나 역시 개발자라써, 디자인 영역에 더 가까운 스타일을 다루는 데는 익숙하지 않으며 직접적인 영향을 받지 않는 기술이긴 하지만 흥미로운 몇 가지 CSS3 기능을 알아 둬서 나쁠 건 없어 보인다

이 글에서는 CSS3의 새로운 기능 중 일부를 소개하고자 한다

다중 컬럼 레이아웃(Multiple column layout)
CSS3 의 새 스타일 중 제일 처음 눈에 띄는 것이었다
다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다

다중 컬럼 레이아웃의 가장 기본적인 적용법은 컬럼 갯수를 정의하는 것이다
컬럼 갯수 정의는 column-count, column-width 두 가지 중 하나의 방식을 이용할 수 있다

column-count : 컬럼의 갯수를 직접적으로 지정한다. 직관적으로 수를 지정할 수 있어 주로 사용된다
                      컬럼의 너비는 컬럼 갯수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다
column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록 한다

그리고 컬럼의 레이아웃을 좀 더 세밀하게 조정할 수 있다
column-gap : 컬럼 간 띄워질 공간을 지정한다
column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다

브라우저에 따른 구현 규칙
현재 다중 컬럼 레이아웃은 Mozilla 와 WebKit 브라우저에서만 지원된다. 즉 파이어폭스, 크롬, 사파리에서 지원된다. 다중 컬럼 레이아웃을 위한 특성은 각 브라우저의 접두사를 같이 사용해야 하는데 이는 스펙이 완료되기 전에 임시 특성을 이용하는 것이다. 스펙이 완성되면 접두사 없이 특성이름만으로도 적용가능하게 될 것이다

웹킷 브라우저 임시 특성 예: -webkit-column-count
모질라 브라우저 임시 특성 예: -moz-column-count

보통 다중 컬럼 레이아웃을 지정할 때 모질라, 웹킷, 그리고 표준 모두를 다 적용해 두는 것이 좋다
이제 다중 컬럼 레이아웃을 지정한 예를 보도록 하자
뉴스를 div로 감싸고 div에 다중컬럼레이아웃을 적용한다. 웹킷 및 모질라 모두 구현하였으며 향후 표준 완성을 위해 접두어을 뺀 특성도 정의해 두었다. 이렇게 하는 것이 좋은 습관이다

실행 화면(크롬)

다양한 텍스트 효과
웹 페이지의 텍스트에 다양한 효과를 줄 수 있어 기존 이미지로 표현해야 했던 것을 간단한 스타일로 대신할 수 있다

Text-Stroke
웹킷 기반 브라우저에서 텍스트 윤곽에 대한 스타일을 지정할 수 있다
Stroke 의 두께와 색상을 지정할 수 있다

<style>
  div {
    font-size: 50px;  
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 1.5px red;          
  }         
</style>

참고> http://www.quirksmode.org/css/stroke.html

Text-Shadow
텍스트에 그림자 효과를 줄 수 있다. 현재 IE를 제외한 사파리, 크롬, 파이어폭스, 오페라에서 모두 지원 된다. 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다
text-shadow: 색상 수평위치 수직위치 선명도

<style>
  div {
    font-size:30px;
    text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px;
  }     
</style>

참고> http://www.quirksmode.org/css/textshadow.html


Text-Overflow
텍스트 랩핑(Wrapping)과 관련되는 스타일이다
영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 현재 IE 6 이상, 크롬, 사파리에서 지원된다

아래 그림을 보면 텍스트 길이가 div 사각영역을 벗어 나고 있다(텍스트가 오버플러 되었다)
이 그림은 텍스트 랩핑을 하지 않았을 때(white-space: nowrap)의 모습이다

그리고 텍스트 랩핑을 하면 아래와 같다(white-space: wrap)

이렇게 오버플로된 텍스트는 보기 싫기 때문에 보통 overflow: hidden 으로 영역을 넘어가는 텍스트를 숨기도록 처리한다. 이렇게 하면 보기 싫게 벗어난 텍스트를 숨길 수 있다

하지만 가장 적합한 선택은 Text-Overflow 의 생략기호(...)를 사용하는 것이다
text-overflow: ellipsis 로 처리하면 아래 그림과 같이 숨겨진 텍스트는 생략기호(...)으로 대체되어
보기 싫지도 않으며 사용자에게 추가 텍스트가 있다는 의미를 직관적으로 알리 수 있다

<div>
  CSS3 텍스트 효과, 텍스트 오버플러
</div>
.....
<style>
  div {   
    padding: 10px 10px;  
    border: 1px solid #000000;           
    height: 1.1em;    
    overflow: hidden; 
    white-space: nowrap;     
    width:20%;
    text-overflow: ellipsis;   
  }     
</style>

참고> http://www.quirksmode.org/css/textoverflow.html


Opacity
텍스트의 투명도를 조절할 수 있다. IE를 제외한 파이어폭스,크롬,사파리,오페라에서 모두 지원한다
(IE이 경우 filter 로 유사한 효과를 줄 수 있다)
투명도는 0.0 ~ 1.0 사이의 값을 가진다. 0(완전 투명) ~ 1(완전 불투명)

코드에서는 opacity 와 더불어 IE8과 IE5~7을 위한 각각의 필터 특성도 정의 해 두었다

<div>
  CSS3 텍스트 효과, 투명도 조절
</div>
<div id="op">
  CSS3 텍스트 효과, 투명도 조절
</div>
.....
<style>
  div{
    font-size: 30px;
    font-weight: bold;
    color: blue;
  } 
  #op{       
    opacity: 0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }     
</style>

참고> http://www.quirksmode.org/css/opacity.html


다양한 테두리 및 백그라운드 효과
테두리와 백그라운드에 다양한 스타일을 적용할 수 있다
이전에 이미지로 가능했던 많은 부분이 간단한 스타일 적용으로 가능하게 된 것이다

Border-Radius
테두리의 각을 조절할 수 있다. 테두리의 양 끝의 각을 0 ~ 50 px까지 조절하여 모서리의 각을 조절한다. IE 9 이전 버전을 제외한 파이어폭스, 크롬, 사파리, 오페라에세 지원된다

<style>
  div{
    font-size: 20px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
  }      
</style>

참고> http://www.quirksmode.org/css/borderradius.html


Box-Shadow
텍스트 뿐만 아니라 테두리에도 그림자 효과를 줄 수 있다
IE9 이전과 오페라를 제외한 파이어폭스, 사파리, 크롬에서 지원된다
box-shadow: 수평위치 수직위치 선명도 색상

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   -webkit-box-shadow: 10px 10px 5px gray;
   -moz-box-shadow: 10px 10px 5px gray;
  }      
</style>

참고> http://www.quirksmode.org/css/boxshadow.html

Gradient
백그라운드에 그라디에이션 효과를 줄 수 있다. 직선 형태(linear) 효과 또는 방사형 형태(radial) 효과를 줄 수 있다. 파이어폭스, 사파리, 크롬에서 지원된다. IE의 경우 filter 로 유사한 효과를 줄 수 있다

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(orange), to(white));  
   background: -moz-linear-gradient(left,  orange,  white);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='white');
  }      
</style>

참고> http://www.quirksmode.org/css/gradient.html

Border-Image
테두리에도 이미지를 깔 수 있게 되었다. 웹킷 기반인 사파리, 크롬과 파이어폭스(-moz-)에서 지원된다

<style>
  div{     
    width:15em;
    height:2em;
    -webkit-border-image: url(mk.gif) 50 25 50 25 repeat stretch;
    -moz-border-image: url(mk.gif) 50 25 50 25 repeat stretch;  
    border: solid 25px #f00;   
  }      
</style>

참고> http://css-infos.net/property/border-image
         http://www.css3.info/preview/border-image/

Multiple Background Images
다중 이미지 백그라운드가 가능하다. 즉 백그라운드에 둘 이상의 이미지를 깔 수 있다
이미지의 위치를 조절하여 여러개의 백그라운드 이미지를 처리할 수 있다
IE8 이전 버전을 제외하고 모두 지원된다

두개의 이미지를 백그라운드에 깔고 수직 반복처리 및 각 이미지의 위치를 좌상단,우상단으로 하였다

<style>
  div{
    border: 1px solid black;   
    width: 20em;
    height: 30em;  
    background-image: url(son1.jpg), url(son3.bmp);
    background-repeat: repeat-y;
    background-position: top left, top right;     
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#multiple


Background-Size
백그라운드에 깔린 이미지의 사이징을 조절 할 수 있다
div 나 textarea의 크기가 변경될 때 백그라운드가 어떻게 반응해야 하는지를 결정할 수 있다
IE8 이전 버전을 제외한 크롬, 사파리, 파이어폭스(-moz), 오페라에서 지원된다
background-size 의 값으로는 다음 중 하나로 지정할 수 있다

- 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size: auto;
- 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size: 250px 20px;
- 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size: 50% 70%   
- contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다
                개체의 가로,세로의 같은 변화에만 반응한다
                (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음)

- cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다
          (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다)

아래의 코드로 브라우저에서 직접 테스트 해 보기 바란다
참고로 div 에 resize를 가능하도록 하여 div의 크기를 사용자가 확대 할 수 있도록 하였다
(resize 는 사파리, 크롬에서만 지원된다

<style>
  div{   
    border: 1px solid black;   
    width: 12em;
    height: 17em;  
    background: url(son1.jpg) center center no-repeat;
    background-size: contain;
    resize: both;
    overflow: auto;    
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#size

Box-Reflect
웹 페이지에 표시되는 개체에 대한 반사 효과를 줄 수 있다. 이 특성은 비단 테두리 및 백그라운드에 국한된 것이 아니라 텍스트, 테이블, 이미지, 비디오 등 웹 페이지에 표현되는 모든 개체가 대상이 된다.
웹킷 기반 브라우저인 사파리, 크롬에서 지원된다

-webkit-box-reflect: direction offset mask-box-image;

<style>
img{
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.0, transparent), to(white)); 
  -webkit-border-radius: 30px;
   #border-radius: 3px;
   #border: 3px solid #777;        
}
</style>

참고> http://css-infos.net/property/-webkit-box-reflect

CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다. 특히 UI를 개발하는 사람은 더욱 관심있게 봐야할 주제이다
CSS3와 관련된 더 자세하고 추가된 학습은 아래의 사이트를 확인하기 바란다
http://www.quirksmode.org/css/contents.html
http://css-infos.net/
http://www.css3.info/preview/

Modernizr 라이브러리는 HTML5 의 API 뿐만 아니라 CSS3 의 각종 새 기능과 SVG 등 새로운 웹 기술에 대한 전반적인 검사 코드를 포함하고 있다.

자세한 사용법은 다음의 URL을 참고하기 바란다 http://www.modernizr.com/docs/

Modernizr 를 이용하여 몇 가지 테스트 수행 코드를 작성해 보았다
O,X 표현을 위해 div 요소를 정의했는데 이 부분은 생략하고 스크립트 부분만 발췌한다

그리고 구글 크롬에서 실행한 결과 화면은 다음과 같다

HTML5Rock 에서 HTML5 개발 시 참고할 만한 유용한 자료를 공개했다

HTML5 와 CSS3 그리고 향상된 스크립트 등을 활용하여 보다 빠른 웹 어플리케이션을 개발하기 위한 실천적 지침을 제공해 주고 있다
Best Practices for a Faster Web App with HTML5

그리고 ETRI 에 근무하시면서 HTML5 관련 주요 활동을 많이 하시는 이원석님이 이 글을 번역해 주셨다. 매우 고마운 일이 아닐 수 없다 ^^;

아래는 이원석님의 번역본 이다
HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

HTML5, CSS3, 자바스크립트 그리고 브라우저의 개선으로 확실히 웹은 향상되고 있다
이들 새로운 기능들을 활용하면 네트워크 대역폭의 효율적 사용은 물론 속도의 개선, 생산성 증가, 자원의 효율적 사용 등을 꾀할 수 있어 결국에는 웹 어플리케이션의 개발과 사용, 양 측면에서의 효과를 볼 수 있다. 번역된 위 블로그 글을 꼼꼼히 살펴 보기 바란다

아래는 위 글을 압축하여 지침과 결과만을 뽑아 본 것이다

페이지끼리 대화 하다
HTML5 에서는 웹 페이지끼리 메세지를 주고 받을 수 있는 커뮤니케이션 API가 제공된다
크로스 도큐먼트 메세징(Cross Document Messaging)이라는 기술을 이용하면
두 개의 웹 페이지가 서로 메세지를 주고 받을 수 있다.

메세지는 비동기로 송/수신 된다
두 페이지가 데이터를 주고 받는 것은 비동기로 진행된다
메시지 송/수신이 UI 흐름을 방해하지 않기 때문에 가치있는 장점이 되겠다

서로 다른 도메인간의 송/수신도 가능하다
'크로스 도큐먼트 메세징' 이라는 이름에서도 알 수 있듯이 서로 다른 도메인에 존재하는 페이지끼리도
메세징이 가능하다. 기존 웹 환경의 대부분의 기술이 '같은 도메인 정책' 이라는 보안 모델을 적용받는 것과는 상반되는 모델이다.

서로 다른 도메인 메세징이 가능하기 때문에 도메인을 넘나드는 연동 구조에 매우 적합하다.
다만 도메인을 넘나 든다는 것은 보안의 위험도 있다는 말이 되니 신경 쓸 부분이다
즉 허가 되지 않는 도메인으로부터의 메시지 수신이나 송신을 주의해야 한다

브라우저 지원 현황
크로스 도큐먼트 메세징은 그 어떤 HTML5 API 보다 브라우저 지원이 빵빵(?)하다
아래 표를 보면 거의 모든 브라우저가 이를 지원하고 있다. 심지어 IE8 조차도...

데이터 수신하기
데이터를 수신하는 측에서는 단순히 window 객체의 message 이벤트를 구현하면 된다

실행 화면(크롬)
co1 에서 send버턴을 클릭하면 co2 로 메시지를 전송하며 co2는 message이벤트를 수신하여
전달받은 데이터를 표시힌다

실행화면(크롬)
데모를 실행해 보면,
페이지 위에서 마우스를 움직이면 다른 페이지로 마우스 좌표를 전달해 주는 것이다

데모 간단 설명
데모의 소스가 복잡하지 않기 때문에 직접 보면 동작 방식을 이해할 수 있다
간단히 설명하면

컨테이너 역할을 하는 index.html 페이지에서 두개의 iframe (iframe1.html, iframe2.html)을 생성하고
이 두 페이지가 서로 메세지를 송/수신하게 된다

index.html 페이지에서는 우선 브라우저가 크로스 도큐먼트 메세징을 지원하는지 여부를
postMessage 함수의 유효성 여부로 체크하고 있다
if (typeof window.postMessage == 'undefined') { .. //브라우저가 지원하지 않음 .. }

그리고 두개의 iframe를 자신의 페이지에 추가한다
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);

메세지를 주고 받는 두 개의 프레임 페이지에서는 각각,
마우스오버(onmouseover) 이벤트를 구현하여 마우수 X,Y 좌표 데이터를 서로에게 전송한다
window.document.onmousemove = function(e) {
    var x = (window.Event) ? e.pageX : window.event.clientX;
    var y = (window.Event) ? e.pageY : window.event.clientY;
    window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*');      
};

마지막으로 데이터 수신 이벤트인 message 이벤트를 구현하는데, 브라우저 호환성을 고려 해
다음과 같이 코드가 구성되어 있다

var onmessage = function(e) {
      var data = e.data;
      var origin = e.origin;
      document.getElementById('display').innerHTML = data;
    };

if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', onmessage);
}

이벤트를 등록하는 두 가지 방법(addEventListener , attachEvent)을 사용했는데,
이는 IE와 파이어폭스 그리고 기타 브라우저를 고려한 호환성을 위한 코드이다
따라서 이 데모를 IE8에서 실행해도 정상적으로 동작하게 된다

이 정도면 데모 동작 방식을 거의 다 이해한 것이다
전체 코드를 실제로 다운 받아서 테스트 해 보기 바란다

참고>
http://developer.apple.com/safari/library/documentation/appleapplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html
http://virtuelvis.com/archives/2005/12/cross-document-messaging
https://developer.mozilla.org/en/DOM/window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages