반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

CSS Sprite Image 관련 팁

2012. 8. 17. 09:41 | Posted by 솔웅


반응형

CSS Sprite Image 작업을 할 때 고민 되는 거는 어떻게 여러 이미지를 한개의 이미지로 만들고 이것을 어떻게 CSS로 코드화 하느냐 입니다.


코로나 SDK 에서도 Sprite Image 작업을 할 때 똑같은 문제가 있습니다.

코로나의 경우엔 3rd party 프로그램으로 손쉽게 할 수 있었는데요.


CSS Sprite Image 도 이 작업을 도와주는 툴이 있습니다.


CSS Sprite Generator 웹 사이트로 가면 되는데요.

웹 주소는 아래와 같습니다.


http://spritegen.website-performance.org/





가 보시면 한국말/조선말 로도 서비스가 됩니다.


사용 방법은 Sprite 로 만들 여러 이미지들을 zip 파일로 압축합니다.

그리고 위의 Choose File 버튼을 누르고 업로드 합니다.


그리고 나서 맨 아래에 있는 CSS Sprite Image & CSS 버튼을 누르면 됩니다.




그러면 위와 같은 결과가 나오는데요.

저 CSS 코드는 긁어다가 활용하시면 되구요.

Sprite Image는 아래 Download Sprite Image 버튼을 눌러서 다운 받으시면 됩니다.


그리고 또 한가지 팁으로 웹 로딩 속도를 테스트 하는 페이지가 있는데요.


http://webwait.com/




사용 방법은 왼쪽 위에 웹 주소를 넣고 (로컬 컴퓨터에 아파치 같은 웹 서버가 깔려 있으면 localhost 도 작동 하더라구요.) 버튼을 누릅니다.


그러면 5번 로딩을 시도해서 그 평균값을 표시해 줍니다.

로딩 시도 횟수는 마음대로 정하실 수도 있습니다.


반응형

CSS Image Sprites 실습 해 보기

2012. 8. 16. 05:06 | Posted by 솔웅


반응형

CSS Image Sprites


Image Sprites는 여러 이미지들을 하나의 이미지 파일로 합쳐 넣는 겁니다.

웹페이지에 이미지가 많으면 일일이 server에 request 해야 되기 때문에 로딩 시간이 많이 걸립니다.

CSS Image Sprites를 사용하면 server request를 줄이고 퍼포먼스를 향상시킬 수 있습니다.




위 이미지에는 집과 좌 우 화살표가 있습니다.

한개의 이미지 인데요.

이것을 집, 왼쪽 화살표, 오른쪽 화살표 이렇게 따로 따로 분리해서 하나의 이미지로 사용할 수 있습니다.


위 이미지는 http://www.w3schools.com/css/img_navsprites.gif 에 있습니다.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#prev{left:0px;width:43px;}
#prev{background:url('http://www.w3schools.com/css/img_navsprites.gif') 87px 0;}

#home{left:60px;width:46px;}
#home{background:url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;}

#next{left:129px;width:43px;}
#next{background:url('http://www.w3schools.com/css/img_navsprites.gif') 177px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="prev"><a href="#"></a></li>
  <li id="home"><a href="#"></a></li>
  <li id="next"><a href="#"></a></li>
</ul>
</body>
</html>



html 파일을 만들고 위 소스코드를 붙여 넣어 보세요.


그러면 아래와 같이 브라우저에 표시 됩니다.



하나만 분석해 보면

#prev{left:0px;width:43px;}
#prev{background:url('img_navsprites.gif') 87px 0;}


첫번째 left 는 브라우저 상의 위치 입니다. 그러니까 0포인트에서 width 43 픽셀까지를 이용할 거라고 먼저 해 놓고 그 다음에 이미지를 넣습니다.

이미지는 img_navsprites.gif 의 87픽셀서부터 표시합니다. 그러면 87픽셀부터 가로로 43픽셀이 표시 되겠죠.

이게 왼쪽 화살표 입니다.


다른 소스코드 볼까요?


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="#"></a></li>
  <li id="prev"><a href="#"></a></li>
  <li id="next"><a href="#"></a></li>
</ul>
</body>
</html>


이것의 원본 이미지는 아래 이미지 입니다.



마우스가 오버 되면 밑의 어두운 이미지가 표시 되도록 하는 것이죠.


직접 만들어서 해 보세요.


마지막 소스코드를 한번 보겠는데요.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.home
{
width:46px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
img.next
{
width:43px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
img.before
{
width:43px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) 87px 0;
}
</style>
</head>

<body>
<img class="home"  width="1" height="1" />
<br /><br />
<img class="next"  width="1" height="1" />
<br /><br />
<img class="before"  width="1" height="1" />
</body>
</html>


이 소스코드가 원래는 http://www.w3schools.com 의 CSS image sprites 튜토리얼 첫번째 나온 겁니다.


그런데 제 컴퓨터에서는 크롬에서만 제대로 표시 되서 맨 마지막에 놨습니다.


브라우저에 표시되는 것은 저 위의 첫번째 소스하고 똑 같습니다.


실무에서는 이미지가 많이 들어갈 경우 퍼포먼스를 향상시키기 위해 이 효과를 써 보는 것도 좋을 것 같습니다.


이 sprite image 를 만들고 css 파일을 얻을 수 있는 싸이트로는 SpriteMe가 있습니다.

링크 따라 가셔서 한번 보세요.


그리고 관련 글로는 여기를 참조하세요.



sprite01.html


sprite02.html


sprite03.html


반응형

HTML5 CSS Text wrapping (Google)

2012. 2. 4. 22:06 | Posted by 솔웅


반응형
오늘은 Text Wrapping 에 대해 살펴 보겠습니다.
이 기능은 Internet Explore 를 제외한 모든 브라우저에서 작동 합니다.

단 아래 슬라이드 바는 Firefox에서는 숫자를 넣는 Textbox로 나옵니다.
슬라이드 바 기능을 Firefox에서 지원을 안하나 봅니다.

You can ellipse below texts with control slide bar.
If you have Firefox browser text box will be displayed instead of the slide bar then just input any number between 1~100 then enter to ellipse those texts.
This function is working on all browsers except Internet Explore.


CSS

Text wrapping

div {
  text-overflow: ellipsis;
}
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Play with the slider on this pages!


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O) -not slide bar-

You can download source code file below.
아래 원본 파일을 다운 받아서 실행해 보세요.


반응형

HTML5 CSS3 Flexible Box Model

2012. 2. 2. 21:08 | Posted by 솔웅


반응형
Let's study for webkit-box of CSS3.
You can change orientation of boxes below. just select 'horizontal' or 'vertical'  of webkit-box-orient in select menu . And you can change align of the boxes also.

오늘은 CSS3의 Flexible Box 와 관련해서 알아보겠습니다.
여기를 클릭하시면 이전에 정리해 뒀던 글도 보실 수있습니다.

** display:-webkit-inline-box;    // block가 아닌 inline box

** -webkit-box-orient : 정렬 ( box ) , 기본은 horizontal
block-axis Elements are oriented along the box's axis.
horizontal Elements are oriented horizontally.
inline-axis Elements are oriented along the inline axis.
vertical Elements are oriented vertically.

** -webkit-box-flex사용
  display:-webkit-box가 적용된 하위 노드들에
  box-flex를 이용해서 크기 설정가능. ( 비율 )

** -webkit-box-pack 사용  : 가로 정렬 처리.
  start|end|center|justify; 

** -webkit-box-align 사용  : 세로 정렬 처리.
  start|end|center|justify; 


CSS

Flexible Box Model

.box {
  display: -webkit-box;
  -webkit-box-orient: ;
}
.box .one, .box .two {
  -webkit-box-flex: 1;
}
.box .three {
  -webkit-box-flex: 3;
}
Box one
Box two
Box three
CSS

Flexible Box Model

.box {
    display: -webkit-box;
    -webkit-box-pack: ;
    -webkit-box-align: ;
  }

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O) except -webkit-box-pack

이 기능은 익스플로어랑 오페라에서는 안 되네요.
그리고 fireFox에서는 webkit-box-pack 기능이 안 되구요.

You can download source code file below.



반응형

HTML5 CSS3 Animation and Adobe Dreamweaver

2012. 1. 30. 03:47 | Posted by 솔웅


반응형
In HTML5, Actually in CSS3, you can use animation effects with out Javascript.
Use -webkit-animation .. that's all. Too simple to make Animation effects.
Unfortunately it is working on Google Chrome and Safari browsers only.

오늘 소개해 드릴 기능은 CSS3의 animation 기능입니다.
복잡하게 자바 스크립트를 사용하지 않아도 간단하게 CSS3의 webkit 을 사용해서 애니메이션 효과를 내실 수 있습니다.



CSS

Animations

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

*Please make a better use of it. We don't want a new blink tag ;)

Pulse!


You can check it out with only Google Chrome and Apple Safari.
이 기능은 아래 O표한 브라우저들에서 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Not working (X)

Download below source code.
아래 소스코드 파일을 받으실 수 있습니다.



Hey guys I'd like to introduce Adobe DreamWeaver CS5 for Phone,Tablet and  PC.
Adobe DreamWeaver CS5 support 3 kine of preview screen for Phone, Tablet and PC. So you can develop web site for those 3 devices at once.
And it support hints of CSS3 functions to make easy development.
As You know HTML5,CSS3 is not Standard Skill Yet so each browsers has some of their own CSS function.
Adobe Dreamweaver provide all of the functions.

아래 하나만 더 소개 할 께요.
요즘은 홈페이지를 볼 수 있는 장치들이 컴퓨터 뿐만 아나라 전화기 그리고 태블릿에서도 볼 수가 있습니다.
그래서 앞으로는 이 3가지 장치들에서 모두 볼 수 있도록 디자인된 웹페이지를 만들어야 합니다.
어도비의 드림위버 CS5에서 이것을 지원하는 기능을 소개하고 있네요.
또 아직 표준으로 확립되지 않은 각 브라우저들만의 여러 CSS3 기능들도 코딩시 hints로 지원하고 있구요.


Click here to see more details.
여기를 클릭 하시면 좀 더 자세한 내용을 보실 수 있습니다.

반응형

HTML5 CSS Columns Google

2012. 1. 27. 21:47 | Posted by 솔웅


반응형
Hey today I introduce Columns in CSS3.
You can just move below slider then the number of columns will be changed.
If you use Firefox then type number in TextBox then hit the enter key.
(It is not working on Internet Explorer and Opera Web browser.)

오늘은 CSS3의 Columns 나누기에 대해 소개해 드리겠습니다.
일단 이 기능은 인터넷 익스플로어랑 오페라 웹 브라우저에서는 작동하지 않습니다.
테스트 하시려면 FireFox나 Google Chrome 혹은 Sapari 브라우저를 사용하셔야 합니다.
구글 크롬이나 사파리의 경우 아래 슬라이드바를 움직이시면 Column 들이 변할겁니다. 2단이었던 것이 3,4,5,6 단 등으로 바뀔겁니다.
파이어폭스일 경우는요 슬라이드바가 안 나타나고 텍스트박스가 나올겁니다.
여기에 숫자를 입력하고 엔터키를 치시면 됩니다.

Columns

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working Well? Well.... (O)

You can down load sample source file below.
소스를 분석하시려면 아래 샘플파일을 받아서 보시면 됩니다.



반응형

HTML5 CSS Transform (Google)

2012. 1. 26. 21:18 | Posted by 솔웅


반응형
Today I am going to introduce transform effect of CSS3.
just mouse over below box then it will rotate smoothly.

오늘 보실 효과는 css3의 transform 효과 입니다.
-webkit-transform 을 이용해서 구현하시면 됩니다.

이 기능은 인터넷 익스플로어와 오페라에서는 작동하지 않네요.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


HTML5 Presentation
CSS

Transforms

Hover over me:



You can download the Sample source code below.
아래 샘플 파일을 다운로드 받으세요.



See you again.

반응형

HTML5 Transitions (-webkit-transition)

2012. 1. 20. 11:15 | Posted by 솔웅


반응형
Basically JavaScript is for dynamic display in Web Programming.
In HTML5 Not only JavaScript but also CSS has excellent dynamic display functions.

One of the Thing is below webkit-transition.
-webkit-transition

HTML5 는 JavaScript와 CSS와 협력해서 여러 효과를 냅니다.
주로 JavaScript 가 동적인 효과를 주는데 사용되는데요. 이제 CSS에서도 이런 동적인 효과를 줄 수 있습니다. webkit 중에 transition을 사용하시면 됩니다.

Just Click the Right and Left Button then you can see it.
왼쪽 오른쪽 버튼을 눌러보세요.


HTML5 Presentation
CSS

Transitions


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)


The Red rectangle below is moving smoothly with using webkit-transition.
아래 사각형은 아주 자연스럽게 움직이죠?
Animation 효과도 줄수 있고 게임에서도 이용할 수 있지 않을까요?

아래 소스코드가 있습니다. 다운 받아 가세요.
Download the source code below.


반응형


반응형
One of the fabulous service from Google is Google map.
You can put the google map on your Web page with HTML5 geolocation.

HTML5를 이용하면 PC나 모바일용 웹페이지에 구글 맵을 서비스 할 수 있습니다.
아래 예제는 샘플인데요.
Show Position 버튼을 누르면 현재 위치가 지도에 표시됩니다.
(위치정보는 사용자가 공유를 허락해야 합니다.)

Click the Show Position button then your location will be displayed on the map.
(You need to allow share your location on your browser)
HTML5 Presentation
JS

Geolocation

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Working well (O)
Opera 11.60                            - Working well (O)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working well (O)

It is working well on all browsers in my Laptop.
You can download sample file below.
인터넷 익스플로러에서도 잘 작동을 하네요.
아래 샘플 파일 올립니다.


블로그 폭이 좁아서 MAP/Satelate 를 선택하는 버튼이 가려졌습니다.
위 파일을 다운 받으시면 전체 화면을 보실 수 있습니다.
지도 화면과 위성화면 둘 다 선택해서 보실 수 있어요.
반응형

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 CSS3 Flexible Box Model  (0) 2012.02.02
HTML5 CSS3 Animation and Adobe Dreamweaver  (0) 2012.01.30
HTML5 CSS Columns Google  (0) 2012.01.27
HTML5 CSS Transform (Google)  (0) 2012.01.26
HTML5 Transitions (-webkit-transition)  (0) 2012.01.20
HTML5 Better semantic tags  (0) 2012.01.18
HTML5 Speech Input (음성인식) API  (0) 2012.01.16
HTML5 Storage 4 - Application Cache -  (0) 2012.01.11
HTML5 Storage 3 - IndexedDB -  (0) 2012.01.10
HTML5 Storage 2 - Web SQL DB -  (7) 2012.01.10

HTML5 Better semantic tags

2012. 1. 18. 22:01 | Posted by 솔웅


반응형
Hey guys welcome to HTML5 tutorial of Google Presentation.
Today I am going to show you Sample codes of HTML5 Tags.
You can see 10 tags (the red tags below) and how to use those tags. 

아래 코드는 HTML5 에서 사용하는 Tag들에 대한 사용예를 보여주는 코드입니다.<header>,<hgroup>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<time datetime="">이렇게 10개의 코드를 가지고 만들었습니다.

header는 제목을 나타낼 때 사용하고 한 페이지에서 여러번 사용할 수 있습니다.
nav는 메뉴이고 section은 범위를 구분지을 때 사용합니다.
article은 내용 aside는 옆쪽에 표시되는 내용에 사용합니다.
figure는 image를 표시할 때사용하고 figcaption은 그 이미지에 대한 설명(제목)을 나타냅니다.
그리고 footer는 꼬리글이구요. time datetime은 날짜를 나타낼때 사용합니다


HTML5 Presentation
HTML

Better semantic tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
<time datetime="2010-11-08">2010</time>. </footer> </body>

You can download sample html file below.
아래 소스 파일 올립니다.



반응형
이전 1 2 3 4 5 다음