플래시가 아니고 CSS3의 transitions이다

CSS3의 Transitions 속성을 transitons를 시험하려고 했다. 그러나 멋있는 것만 보면 플래시라 생각하는 고정관념이 있어 플래시와 연관해서 설명하면 좋을 것 같아 적을 까한다.

플래시가 아니고 CSS이다.

아래는 플래시를 이용한 것이 아니라 CSS3의 Transitons를 이용한 것이다. 몇년전까지만 해도 트랜지션 효과는 열에 아홉은 플래시였으나 요즘은 CSS3,HTML5,jQuery 등을 사용한 것이 많아서 의심되는 것이 많다. 아래 것도 플래시가 아닌 CSS3의 transitions를 사용한 것이다.

문제는 transitons 속성을 지원하는 익스플로러 10,크롬,사파리,파이어폭스,오페라 등과 스마트폰를 비롯한 태블릿PC에서 브라우저인 최신 브라우저에서 아래 것이 플래시가 아니라는 것이 대단할 것이다. 

왜냐하면 transitions를 지원하지 않으면 아래는 그냥 배경이 흰색이 검정으로 변하는 간단한 것으로 보일 것이기 때문이다. transitions을 지원하면 배경이 서서히 변하고 옆으로 서서히 확장되는 것이 보이기 때문에 플래시인지 놀란 것이기 때문이다. 이것은 몇년전까지 플래시에서만 봤던 것이었기 때문이다. 그러나 지금은 CSS3의 transitions(트랜지션)이라는 것을 사용하면 간단하다.

• 2013/04/26 - 파워포인트,평가판 다운로드와 알아 두면 아주 좋은 사항
• 2013/04/23 - SNS 때문에 기업블로그가 티스토리에 많은 것 같다
• 2013/04/07 - 원노트(OneNote),문서작성,앱 등에 대한 리뷰
• 2013/04/04 - 에버노트/구글드라이브,문서작성/공유/편집에 적절한 것 - 스마트폰에서
• 2013/04/10 - 반드시 스카이드라이브와 드롭박스는 이용

그리고 이 블로그에 사용하는 것도 플래시가 아닌 jQuery,자바스크립트,CSS3,HTML5 등이고 자세한 사항은 아래에 적었다. 나는 플래시  단점을 알아 플래시를 사용하지 않는다. 플래시의 장점과 단점은 다음 글에 적는다.

• 2013/02/20 - 플래시(SWF)가 아닌 jquery와 자바스크립트를 사용했음.

익스플로러 6,7,8,9에서는 지원하지 않는다

알아두어야 할 사항은 이 효과는 아쉽게 익스플로러(IE) 6,7,8,9에서는 효과가 보이지 않는다. 이 말은 CSS3의 Transitions를 지원하지 않는다는 말이다. 만약 위가 그냥 평범하게 나온다면 자신의 브라우저가 익스플로러 6,7,8,9인지 의심해봐야 한다. 그리고 아래 글에서 익스플로러 6,7,8,9에서 지원하지 않는 HTML5와 CSS3를 알 수 있다. 참고로 현재 최신 익스플로러는 10이며 10은 Transitions를 지원한다.

• 2013/04/20 - HTML5와 CSS3, jQuery 사용시 생각할 사항 2

아래 더보기를 클릭하여 구글 애널리틱스로 본 이 블로그의 브라우저 통계 그림을 볼 수 있다.  언제 익스를로러 7,8,9가 사라질지고 10이 탑 10에 나설지...그나마 다행인 것은 익스플로러6이 탑10에 없다는 것이다. 지금 나는 6은 고려하고 있지 않은데 내년에는 MS가 윈도우XP 업데이트를 중지할 예정(2014/4/8)이니 나도 익스플로러 7을 고려하지 않고 블로그를 디자인을 해야겠다. 그런데 익스플로러8도 고려하고 싶지 않으나 윈도우7 사용자도 많고 윈도우7의 기본 브라우저인 익스플로러8인 고려하지 않을 수 없다.   

아래 통계에서 빨간색 사각형은 익스플로러(Internet Explorer,IE)고 초록색 사각형은 방문수이다. 이 글을 쓴 시점을 기준으로 최근 한달 이다. Chrome는 구글 크롬이고 Safari는 아이폰과 아이패드의 기본 브라우저인 사파리다. 또한 Firefox는 파이어폭스다. 국외와 달리 국내에서는 파이어폭스 사용자는 그렇게 많지 않은 것 같다. 참고로 그림을 클릭하면 원본으로 볼 수 있다.

소스 구하기

위 Transitions 효과를 사용한 소스 는 아래에서 구할 수 있다. 단 그 페이지는 영어이라는 것을 알았으면 한다. 이것을 활용한 것은 이 블로그 카테고리를 보면 있는 것이고,목록에도 나온다.

• 다운로드 : http://www.dynamicdrive.com/style/csslibrary/item/animated_ul_background_effect/

반드시 알았으면 하는 사항

나는 위에서 위 효과 즉 플래시가 아니라고 한 transitons를 이용한 것은 익스플로러 6,7,8,9에서는 안 된다고 말했다. 그런데 글은 어렵고 귀찮으니 글 읽는 것은 지나치고 간단하게 소스만 다운받고 안 된다고 하는 사람이 있다.

글을 제대로 읽고서 질문을 하기 바란다. 글을 읽지도 않고 쓸데없고 답답한 질문을 하는 사람이 있다. 내가 글을 아무 생각없이 쓰는지 아는지... 예전에 어이없던 일이 있었는데 뭐냐면 글에 했던 대로 안 됐다고 해서 자랑스럽게 되는 방법을 적었던데 그 방법이 글에 있던 방법이었다. 해주고 싶은 말을 속마음을 적고 싶지만 욕이 나올 것 같아 그만 둔 적이 있다.