http://naradesign.net/wp/2008/10/31/203/
폭스바겐 자동차의 홍보사이트
서핑 중에 너무 재밌는 사이트를 하나 발견했습니다. ^^
폭스바겐의 홍보 사이트 입니다.
사람들이 직접 움직여가면서 페이지를 꾸며나가는 아이디어도 신선했고 오른쪽에서 연주하시는 분도 경쾌한 분위기를 잘 살려주세요 ㅋㅋ
왼쪽 메뉴에 마우스를 올려보면 메뉴판을 들고 있는 사람이 살짝 앉아주는 센스도 보여주네요 ^^
메뉴를 클릭하면 사람들이 분주하게 웅성거리면서 나갔다가 다시 페이지를 꾸며줍니다.
사이트를 한참을 구경했네요~
etc 에 올린 글
마이크로소프트의 Expression Studio 2
MS에서 “Expression Studio 2” 를 정식 5월 1일에 발표했다.
무지 늦은 포스팅이지만 정리 차원에서… ^^;
기존 Expression Studio가 Adobe사의 그래픽 툴에 대응하기 위한 패키지(??)였다면 Expression Studio2는 RIA를 개발하기 위한 통합 패키지 정도로 생각된다.
하두 제품이 많아서 대략 정리 해보면 이렇다..
- Expression Web2 – 드림위버에 해당하는 HTML, XTHML, XML CSS, XML 등등의 에디팅 프로그램
- Expression Design2 – 일러스트에 대응하는 벡터 그래픽 편집툴
- Expression Blend2 : 플래쉬와 유사한 툴로서 각종 모션, 효과 편집
- Expression Media2 – 미디어 자산 관리툴로서 그래픽과 비디오 파일들을 보관할 수 있다.
- Expression Encoder2 – 동영상 파일을 인코딩하기 위한 툴
- VS2008 – 설명이 필요없으니 패스~
배워야 할 것도 많은데…. 툴까지 이렇게 늘어나다니… 아흐흑…
Expression Sudio, silverlight 에 올린 글
크롬…털썩…
요새 회사에서 실버라이트 스터디를 시작해서 한창 재밌게 배우는 중이다…
헉…그런데…올블로그를 서핑하다가 실버라이트와 크롬이라는 글을 보고 냉콤 들어가봤더니..
크롬(물론 베타이지만)이 실버라이트를 제대로 지원해주지 못한다는 내용이었다.
그래서 부랴부랴 진행중인 스터디 페이지를 띄워봤더니 뜨긴 뜨는데 너무 느려서 확인을 할 수 없는 지경이다….ㅠ.ㅠ
같은WebKit 엔진을 사용하고 있는 사파리에서 제대로 나와서 신경안쓰고 있었는데..제길..털썩..
구글~~ 어서 어서 실버라이트 지원해주세요~~~
silverlight 에 올린 글
이미지에 백그라운드 이미지 적용하기
원문 : http://www.contentwithstyle.co.uk/Blog/183/css-background-image-on-html-image-element
이미지에 백그라운드를 적용할수 있을까?? 라는 질문에서 시작된 예제입니다.
생각해본적이 없었는데 재밌네요 ^^;
방식은 이미지에 display:block과 padding 값으로 주는 것입니다.
div {
background: url('blur.jpg') no-repeat top left;
width: 232px;
height: 200px;
}
img {
display: block;
background: url(‘parallax.gif’) no-repeat bottom left;
padding: 93px 100px 75px 100px;
}
샘플 예제 : http://www.semantic.pe.kr/example/img_bg_demo/
css 에 올린 글
초간단?? 위지윅 에디터 만들기
출처 : http://www.zdnet.co.kr/builder/dev/web/0,39031700,39160497,00.htm
최신 웹 브라우저들은 위지윅(WYSIWYG) 에디터가 탑재되면서 ActiveX없이 웹 브라우저내에 내장된 위지윅 에디터를 사용하여 위지윅 에디터를 만드는 일이 가능해졌다.
생각보다는 간단하지만 무척 골치아픈 일이기도 하다 ^^;;
그럼 어떻게?? 브라우저의 위지윅 에디터를 이용하는 방법은두 가지가 있다.
1. document.designMode에 ‘on’ 값을 주는 방법
그러면 페이지 전체가 에디팅 할 수 있는 모드로 변경되며 ie5.5 이상을 포함한 최신 브라우저(FF1.3이상, Opera, Safari, chrome 등등) 에서 모두 지원한다.
<html>
<head>
<script type=”text/javascript”>
document.designMode = ‘on’
</script>
</head>
<body>
<h2>Hello</h2>
<p>World</p>
</body>
</html>
겉보기론 별 다를 바 없어 보이지만 이 페이지는 브라우저상에서 편집이 가능하다. 만약 e와 l 사이에 커서가 있는 상태에서 a를 입력하면 Heallo가 보일 것이다. 물론 스타일은 주변 스타일을 그대로 유지한다. 화살표 키로 이동하는 것도 일반 에디터와 비슷하고 글자를 입력하거나 지우는 것도 비슷하다. 웹 브라우저 자체에서 키 입력을 받아서 HTML 문서의 DOM 객체를 수정하는 것이다. 그래서 DOM Inspector 등으로 보면 엘리먼트의 내용이 Heallo로 바뀌는 것을 볼 수 있다.
2. contentEditable에 ‘true’ 값을 주는 방법.
IE에는 designMode와는 별개로 또 contentEditable이라는 속성이 있다. designMode가 HTML 문서 전체를 편집할 수 있도록 하는데 반해 contentEditable 속성은 document 객체의 속성이 아니라 엘리먼트의 속성으로 HTML 문서의 일부분만 편집할 수 있도록 할 수 있다. div나 span, a 등의 엘리먼트에 적용할 수 있다. 그래서 웹 에디터를 만들기는 파이어폭스보다 IE가 조금 더 쉽다.
반면 designMode는 문서 전체를 편집할 수 있도록 만들기 때문에 메뉴나 내비게이션까지 지워버릴 수도 있고 또 designMode에서는 링크를 클릭해도 이동하지 않기 때문에 지우지 않더라도 동작하지 않는다. 그래서 designMode만 지원하는 브라우저에서는 위지윅 에디터를 만들 때 iframe을 사용한다.
iframe 안에 designMode를 켠 문서를 넣고 바깥에 메뉴나 내비게이션이 있는 문서는 designMode를 끈 상태로 놔두는 것이다. 그러면 iframe 영역만 자유롭게 편집할 수 있다.
- 초간단 위지윅 에디터 예제
- Mozilla Developer Center : Rich-Text Editing in Mozilla
- MSDN : How to Create an HTML Editor Application
wysiwyg editor 에 올린 글
XAML 발음
XAML(eXtensibel Application Markup Language)의 발음이 무엇인지 궁금했는데…
“제믈”정도로 발음하는 것이 옳은 표현인 것 같다.
^^; 정리 차원에서..
silverlight, XAML 에 올린 글
