블로그 이미지
안녕1999

카테고리

전체 (3067)
자바스크립트 (20)
안드로이드 (14)
WebGL (4)
변비 (17)
정치,경제 (35)
C언어,ARM (162)
컴퓨터(PC, Note Book, 윈.. (41)
전자회로, PCB (27)
유머,안웃긴,GIF,동영상 (118)
국부론60 (71)
모듈(PCB) (3)
건강 (2)
FreeCAD (25)
PADS (43)
퇴직,퇴사,구직,취업 활동 (3)
C# (86)
엑셀 (8)
워드 (0)
LabView (6)
레고 (30)
FPGA (0)
Total
Today
Yesterday

달력

« » 2024.5
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

공지사항

최근에 올라온 글

'html'에 해당되는 글 2건

  1. 2017.03.04 html vs canvas 장단점
  2. 2016.06.18 HTML - CSS3 vs JavaScript

html방식은 기존의 이미지, <div>등을 사용하여, 화면을 그리는 방식이고,

canvas방식은 canvas안에 그래픽함수로 화면을 그리는 방식이다.


 

html

canvas 

설명

img, div등으로 화면을 구성. 

점,선,이미지출력등으로 화면을 구성 

화면

대부분의 웹브라우져에서 동작하나,

화면모양이 달라질 수 있다

세밀한 표현이 어렵다.

구현이 안되는 기능(화면)이 존재

오래된 웹브라우져에서는 지원되지 않음.

동작되는 모든 웹브라우져에서 동일한 화면.

세밀한 표현이 가능.

모든 기능을 구현할 수 있다.

속도

컨트롤개체가 많으면, 느려짐. 

컨트롤 개체가 많아도 비교적 빠름. 

개발편의성

간단한 화면은 쉬움.

기능이 복잡하고, 커질 수록, 어려워짐. 

간단한 화면도, 기본 라이브러리를 작성해야해서, 개발이 오래걸림. 

개발시 장점

비교적 빠른 개발이 가능.


기본 GUI 라이브러리가 없다면, 오래걸림.

버그가 많이 발생할 수 도 있다.

웹브라우져 호환성

모든 웹브라우져에서 동작테스트를 해야한다.

웹브라우져마다 다른 코드를 배워야한다.

모든 웹브라우져에서 동일한 화면.

웹브라우져와 상관없이 개발가능.

 

대부분의 개체에 마우스이벤트가 존재하여, 작성이 쉬움.

마우스 이벤트는 영역검사하여 처리해야함.

(복잡함) 

 유지보수

웹브라우져마다 다르므로, 유지보수를 많이 해야할 수 도 있다. 

유지보수 필요성이 거의 없음. 

 

 

 



Posted by 안녕1999
, |


문제의 시작

위 이미지는 구글 동영상 품질보고서에 나오는 내용이다.

https://www.google.com/get/videoqualityreport/?v=-rMMTv7XLYw#how_video_gets_to_you

CSS 애니메이션으로 작성된듯 하다.


그놈에 호기심....ㅠㅠ


CSS3와 자바스크립트와 어떻게 다를까?

CSS는 간단한 애니메이션은 아주 쉽게 구현이 가능해 보인다.

예전부터 사용해오던 자바스크립트와 어떻게 다를까?


이와 관련하여 구글 디벨로퍼 사이트에 이런 내용이 잘 정리되어 있다.(아래 참고)


CSS : 변경이 없는 단순 애니메이션

자바스크립트 : 외부 이벤트가 있는 복잡한 애니메이션등


자바스크립트로 컨트롤하고, CSS로 표시하는방법이 효과적이다.



참고 : https://developers.google.com/web/fundamentals/design-and-ui/animations/css-vs-javascript?hl=ko



CSS가 핸드폰에서도 동작하는가?

안드로이드, 갤럭시, 크롬 브라우져에서 동작하는것 확인함.



CSS와 자바스크림트 성능 비교


https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance#css-vs-javascript-performance


https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance?hl=en


만족스럽지는 못한 자료다.



CSS : http://www.w3schools.com/css/default.asp

http://www.clearboth.org/48_dynamic_style_-_manipulating_css_with_javascript/


Posted by 안녕1999
, |

최근에 달린 댓글

글 보관함