본문 바로가기

나의 플랫폼/HTML5

[ HTML5 ] Canvas를 이용하여 눈내리는 모션. 그렇게 좋은 내용은 아니고 참고만 하시면 될듯 합니다. 이미지 위로 눈이 내리는 효과를 내보았습니다. 움직임이 깔끔하지는 않지만, 참고용으로 보시면 나쁘지 않을 듯 합니다. Canvas resize, Gradation, 도형 그리기, shadow등 여러 기능을 이용했습니다. 이번엔 파일로 올리지만, 다음 부터 도메인으로 직접 링크 시켜 놓을 생각입니다. 그럼 오늘도 즐코딩하세요. 더보기
[ HTML5 : CSS3 ] Transition 데모 책에 예제 소스를 연습하다가, transition 이라는 멋진 속성을 보게 되었습니다. 하지만, ease-in, ease-in-out등 옵션이 몇가지가 있는지 궁금해서 조사해봤는데~ 역시 수는 적지만 다양한 옵션이 있네요. 샘플은 아래 사이트에서 부분적인 소스만 복사한 것이구요. 참고용으로 보시면 될듯 합니다. 사이트: http://css3.bradshawenterprises.com/transitions/ Demo - Different timing functions Ease Ease In Ease Out Ease In Out Linear Custom Hover on me 더보기
[ HTML5 ] Margin 과 Padding의 차이점 Margin 과 Padding 모두 컨텐츠 간의 공간을 만들기 위해서 사용되는 속성입니다. 전 지금 까지 margin과 padding을 구분 없이 막 사용 했습니다. 하지만, Layout을 만들 때 먼가 생각대로 표현이 안될 때가 있어 이렇게 조사한 내용을 올립니다. 먼저, 제가 이해한 Margin과 Padding의 설명입니다. Margin : 컨텐츠들 간의 공간을 생성 (ex> 버튼과 버튼 사이, 이미지와 이미지 사이 등등) Padding : 컨텐츠 안에 공간이 더 필요할 때 ( ex> Table 안쪽 공간 확보 등등) 출처: http://song4u.info/238 HTML5를 공부하면서 간단하게 이해가 확 오는 예제를 만들어 보았습니다. 보시는 면 바로 아!!!! 아시죠??ㅎㅎ Padding 은 b.. 더보기