|
The key pieces used: 중요한 사용한 조각: [code:css]p { background-image: url(coke-label.jpg); background-attachment: fixed; background-repeat: repeat-x; width: 1px; } #x1 {background-position: 5px 30px;} #x2 {background-position: 0px 30px;} #x3 {background-position: -3px 30px;} #x4 {background-position: -6px 30px;} #x5 {background-position: -8px 30px;} [/code] It helps to see the can and the wrapper that is placed around it. 이것은 이것을 감싸는것을 도울수 있다.
takeone 당황스러울 정도의 예제네요. 이제 순수 CSS효과로도 멋진 효과를 만들수 있겠군요. 빨리 CSS3가 정착되었으면 합니다. |
|
Home // Blog
Home // Notice
Home // Tag Log
Home // Location Log
Home // Media Log
Home // GuestBook
'2010/01'에 해당되는 글 12건
- 순수한 CSS로 콜라캔을 돌려보자(Rolling a coke can around with pure CSS) 2010/01/29
- 캔버스 밴치마킹 (Canvas Benchmark) 2010/01/29
- 유튜브 및 HTML5 비디오 태그에 대한 Vimeo 설정 2010/01/25
- Fusebox 와 함께 자바스크립트를 진정시켜라 2010/01/25
- Jaml: Haml과 같은 하나의 HTML 빌더 2010/01/25
- jQuery 1.4가 릴리즈됬습니다! 2010/01/21
- 파이어버그 1.5 : 새로운기능과 파이어폭스 3.6에 대한 준비 2010/01/21
- 구글 웹 툴킷 컴파일 속도 최적화 ( How to Speedup Gwt Compiler ) 2010/01/18
- IE7 이후 클립보드 복사 2010/01/18
- 젠드 옵티마이저, 이엑셀레이터 yum 으로 설치 ( Install Zend Optimizer and Eaccelerator using Yum ) 2010/01/16
순수한 CSS로 콜라캔을 돌려보자(Rolling a coke can around with pure CSS)
Posted at 2010/01/29 15:09 //
in Development/Ajaxian //
by
캔버스 밴치마킹 (Canvas Benchmark)
Posted at 2010/01/29 15:03 //
in Development/Ajaxian //
by
|
|
|
유튜브 및 HTML5 비디오 태그에 대한 Vimeo 설정
Posted at 2010/01/25 14:53 //
in Development/Ajaxian //
by
|
At Google I/O the team showed a demo of YouTube running video right in the browser, instead of in the rectangle of Flash. 구글 I/O 팀이 보여준 유튜브 데모 실행 비도오를 플래시의 사각형 대신에 브라우저에서 바로 보여줬다. Now, that URL takes you to the beta, which you can opt-in too. I am torn on what to write on this showcase though…. so, especially since it is Friday, here are two takes: 현재 이 URL은 베타로 선택기능 역시 할 수 있다. Open Web Advocate 오픈 웹 옹호 It is fantastic to see a massive site – the poster child of Flash video – implement HTML5 video. If you want to piss of an Adobean ask them “how do you feel about YouTube folks making millions off of the back of your work. Surely you got a bunch of license money… oh wait.” 이 거대한 사이트는 환상적이다 - 플래시 비디오의 포스터 아동 - HTML5 video를 구현한다. This is the first step for YouTube, and now that video is a native experience in the browser they can innovate in really interesting ways. One bonus feature for trying the beta: “Videos with ads are not supported” :) The Other Guy It is great to see YouTube showing off HTML5 support, however you will notice that it only works in the Safari/Chrome world (saying it works in IE via ChromeFrame is cheating) due to the fact that YouTube only supports H.264 and hasn’t done Ogg. Sure it would take a lot to get Ogg support at that scale, but it would also help the cause a lot. When you test it at this early stage you also see that there isn’t HD support or much of the other features of the Flash player, so instead of showing off how the experience can be better….. it is in catch up mode. Features such as full screen aren’t even an option yet of course. We need to move faster. I am looking forward how things play out over time. What guy are you today? NOTE: Vimeo are turning on support too, also H.264 only. 노트 : Vimeo 는 H.264만을 지원한다. |
|
Fusebox 와 함께 자바스크립트를 진정시켜라
Posted at 2010/01/25 14:39 //
in Development/Ajaxian //
by
|
존 데이비드 달튼씨는 자바스크립트를 샌드박스할수 있는 라이브러리, Fushbox를 릴리즈했습니다. 자바스크립트를 확장하는것은 당신이 필요한만큼 언어를 커스터마이징 하는것에 당신에게 힘을준다. 당신은 편리한 메서드, "hello world".capitalize() 나 펑셔널리티하게 구현된 [1,2,3].indexOf(2) 와 같은, 를 추가할수 있다. 이문제는 프레임워크, 라이브러리, 써드파티 스크립트 에서 네이티브 메서드나 서로의 커스텀 메서드들이 예측할수없게 덮어씌워지게 되는 결과가 나온다. Fushbox, 제한된 버전은 FushJS안에서 샌드박싱 컴포넌트를 찾을수 있다. 샌드박스된 자바스크립트를 만듦으로써 이 이슈들을 피할수 있고 자바스크립트에 영향을 주지않고 확장할수 있다. 예를 들어,
[code:js]
var fb = Fusebox();
fb.Array.prototype.hai = function() {
return "Oh hai, we have " + this.length + " items.";
};
fb.Array(1,2,3).hai(); // "Oh hai, we have 3 items."
typeof window.Array.prototype.hai; // undefined
[/code] 존은 기존 자바스크립트를 샌드박싱하는 문제에 대해 스크린샷으로 소개하고있는 시리즈가 있다. 이것들을 어떻게 사용하는지, 그리고 이 기술이 모든일이 어떻게 사용되어지는지 :
Great to learn from. It is a shame that you have to remember to use a very different way to access the types of course and that you have to do all of this magic.... but with JavaScript, it is what it is! |
|
Jaml: Haml과 같은 하나의 HTML 빌더
Posted at 2010/01/25 14:20 //
in Development/Ajaxian //
by
|
There have been a few HTML builder APIs out there 현재까지 몇개의 HTML 빌더가 나왔다. 하지만 에드 스펜셔(ExtJS의 새로운 다른 가지)씨는 루비쪽에서 Haml과 비슷한 것을 내놓았다. 이와 같이 HTML을 Jaml로 써보자
[code:js]
div(
h1("Some title"),
p("Some exciting paragraph text"),
br(),
ul(
li("First item"),
li("Second item"),
li("Third item")
)
);
[/code]
당신은 또한 이와같이 템플릿으로 이용할수 있다.
[code:js]
Jaml.register('product', function(product) {
div({cls: 'product'},
h1(product.title),
p(product.description),
img({src: product.thumbUrl}),
a({href: product.imageUrl}, 'View larger image'),
form(
label({'for': 'quantity'}, "Quantity"),
input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),
input({type: 'submit', value: 'Add to Cart'})
)
);
});
[/code]
그의 Github 저장소에서 모든것을 확인하라 |
|
jQuery 1.4가 릴리즈됬습니다!
Posted at 2010/01/21 10:27 //
in Development/AJAX //
by
|
엄청나게 많은 사람들이 새로운 웹사이트에서jQuery 1.4 가 릴리즈되는것에 대하여 jQuery가 14일째를 맞는것을 축하해줄것이다. 많은 새로운 기능이 있고, 평소처럼 퍼포먼스의 향상을 모았다
그리고 Joe Walker 가 dojo.create이 제출되었다는것을 보면 매우 기뻐할것이다! :) [code:js]jQuery(" ", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");[/code] Congrats to the jQuery team. I look forward to seeing posts over the next 2 weeks that go into more detail on the new coolness. |
|
파이어버그 1.5 : 새로운기능과 파이어폭스 3.6에 대한 준비
Posted at 2010/01/21 10:07 //
in Development/Ajaxian //
by
이것은 큰 문제입니다. 파이어폭스3.6이 릴리즈 되기 전에 더이상 "오 세상에 우리는 새로운 파이어폭스를 가지고 있지만 파이어버그가 안되네요. 아아....". 하는일은 없습니다. 훌륭하네요! |
|
구글 웹 툴킷 컴파일 속도 최적화 ( How to Speedup Gwt Compiler )
Posted at 2010/01/18 16:00 //
in Development/Google Web Toolkit //
by
|
일단 GWT 프로젝트를 처음 시작할때의 컴파일 속도입니다. Compilation succeeded -- 49.812s 일단 컴파일 옵션에 -localWorkers 4 를 추가합니다. 컴파일 옵션은 이클립스 좌측 상단에 G 라고 쓰여있는 빨간상자를 클릭하시면 됩니다. 열면 Advenced에 Additional compiler aguments 에 추가합니다. Compilation succeeded -- 48.935s 미비하게 향상되네요. 컴퓨터가 좋으면 더 많이 향상된다고 하는데 어떨지 모르겠네요 다음은 MyModule.gwt.xml 을 수정해주는것입니다. 내용중에 다음을 추가합니다.
GWT 는 자바 코드로 컴파일후 이를 각 브라우저에 맞게 javascript 코드로 변형시켜줍니다. 때문에 컴파일할때 모든 브라우저에 대한 작업을 하게 되는데 테스트시에는 보통 하나의 브라우저로 하기때문에 테스트 할때는 gecko 엔진으로 정해주면 됩니다. gecko엔진으로 하면 Compilation succeeded -- 23.864s 두배 이상 컴파일 시간이 단축됐네요, 외국 블로그 글을 보니 i18n옵션도 조정해서 속도를 조절하던데 이건 머 기본으로 포함된 부분이 아니니 별 의미는 없을듯 합니다. 또다른 방법 있으신분 제보좀요! ^^ 다음은 관련 링크입니다. |
|
IE7 이후 클립보드 복사
Posted at 2010/01/18 15:58 //
in Development/HTML/Javascript //
by
|
|
|
젠드 옵티마이저, 이엑셀레이터 yum 으로 설치 ( Install Zend Optimizer and Eaccelerator using Yum )
Posted at 2010/01/16 10:10 //
in 분류없음 //
by
wget -q -O - http://www.atomicorp.com/installers/atomic.sh | sh 설치
|
|