움직이는 동적 소스구해여 정보
움직이는 동적 소스구해여본문
하단에 전혀 gif 플래쉬 쓰지도않았는데 어떻게 이미지가 움직일까요? id나 class보니 css에서 움직인건가요? 아니면 제이쿼리나 자바스트립인가요? 소스가있다면 알고싶습니다..
https://lte.skt-lte.co.kr/web/main/main.do
https://lte.skt-lte.co.kr/web/main/main.do
댓글 전체
플레이어는 html5구요 눝이라는 글자가 움직이는데 요거 보고 충격먹음ㅋㅋ;
png이미지 여러장을 순차적으로 보여줌..ㅎㄷ;
<a id="d_logo_a" href="/web/main/main.do" style="opacity: 1;"><img src="/images/pre/swf/bg_logo_a01.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a02.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a03.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a04.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a05.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a06.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a07.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a08.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a09.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a10.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a11.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a12.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a13.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a14.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a15.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a16.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a17.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a18.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a19.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a20.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a21.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a22.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a23.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a24.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a25.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a26.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a27.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a28.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a29.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a30.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a31.png" alt="" style=""></a>
요기 1번부터 31번까지 display:none 스타일을 순차적으로 지워줌으로서 프레임형성..ㅎㄷ;
png이미지 여러장을 순차적으로 보여줌..ㅎㄷ;
<a id="d_logo_a" href="/web/main/main.do" style="opacity: 1;"><img src="/images/pre/swf/bg_logo_a01.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a02.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a03.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a04.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a05.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a06.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a07.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a08.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a09.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a10.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a11.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a12.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a13.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a14.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a15.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a16.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a17.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a18.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a19.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a20.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a21.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a22.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a23.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a24.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a25.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a26.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a27.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a28.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a29.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a30.png" alt="" style="display: none;"><img src="/images/pre/swf/bg_logo_a31.png" alt="" style=""></a>
요기 1번부터 31번까지 display:none 스타일을 순차적으로 지워줌으로서 프레임형성..ㅎㄷ;
스크롤내리면 움직이는건 스크롤위치 비교해서 document.getElementById(id).style.top="px";을 이용하여 값을 변경해주는겁니다.ㅇㅅㅇ;
제이쿼리도 썼구요
제이쿼리도 썼구요
저 jquery를 사이트 개발자나 웹디가 다 짰다고 생각은 마시고 ,
jquery plugin 이나 jquery Library 로 조합해서 만든 웹사이트 입니다.
물로 다 짜서 사이트를 만드는 분일수도있지만...
그러나 jquery plugin 이나 jquery Library 소스를 서로 겹쳐 쓸수있는 기본적인 jquery 코드에 대해 알아야 그런 사이트를 만들수있습니다.
그래야 이미지와 영상 소스를 붙이고 그런 효과를 볼수있져.
jquery소스가 하나일땐 하나의 효과를 줄땐 문제가 되지않지만
대부분 jquery plugin 소스를 1개이상 2~3개 같이 쓸때는 충돌이일어납니다.
그래서 충돌 않나는 소스끼리 결합하면 좋지만 그렇지 않을경우
jquery에 대한 지식이 어느 정도 있어야(중급이상), 소스를 섞어 쓸수있습니다.
그냥 웹시안만 만들던 웹디분이라면 이런 사이트는 혼자 못만드십니다.
반드시 jquery를 알고있는 분이 동적인 부분인 jquery로 기본 설계를 해줘야지요.
그리고 html5 만으로는 저런 사이트 못만듭니다.
jquery가 그 핵심기술입니다.
jquery plugin 이나 jquery Library 로 조합해서 만든 웹사이트 입니다.
물로 다 짜서 사이트를 만드는 분일수도있지만...
그러나 jquery plugin 이나 jquery Library 소스를 서로 겹쳐 쓸수있는 기본적인 jquery 코드에 대해 알아야 그런 사이트를 만들수있습니다.
그래야 이미지와 영상 소스를 붙이고 그런 효과를 볼수있져.
jquery소스가 하나일땐 하나의 효과를 줄땐 문제가 되지않지만
대부분 jquery plugin 소스를 1개이상 2~3개 같이 쓸때는 충돌이일어납니다.
그래서 충돌 않나는 소스끼리 결합하면 좋지만 그렇지 않을경우
jquery에 대한 지식이 어느 정도 있어야(중급이상), 소스를 섞어 쓸수있습니다.
그냥 웹시안만 만들던 웹디분이라면 이런 사이트는 혼자 못만드십니다.
반드시 jquery를 알고있는 분이 동적인 부분인 jquery로 기본 설계를 해줘야지요.
그리고 html5 만으로는 저런 사이트 못만듭니다.
jquery가 그 핵심기술입니다.
이거 웹디들 기분 팍 상하는 말씀 같으십니다. 웹디라고 jQuery 작성을 못하다니요?
http://aremysitesup.com/
Css Tricks 의 Chris Coyier, 유명한 웹디 죠. 이 사이트 Christ Coyier 가 만든 사이트 입니다.
http://fuelyourcoding.com/files/chriscoyierimg.jpg
nodeJs 기반이고, 제작년에 기술혁신상을 받기도 했습니다.
(웹디들은 php 가 어려우니, jQuery 를 nodeJS 서버에 올려서 jQuery 를 서버쪽에서 돌리는 사이트를 구축하는 방법을 많이 택합니다.)
웹디라고 jQuery 도 못하고, php 도 못한다고 단정짓는 건 좀 아닌 것 같습니다.
jQuery 같은 경우, 오히려 웹디들은 css 에 대한 정확한 이해를 갖고 있기 때문에 프로그래머들보다 더 멋진 css + jQuery 조합을 만들어 낼수도 있습니다. jQuery API 들 보면 웹디들이 만들어낸 API 가 숫자적으로 훨씬 더 많습니다.
프로그래머들이 간단간단한 html, css 는 먹여줄 수 있듯이, 웹디도 간단간단한 php 는 먹여줄수 있거든요. if else, header redirect 같은 단순한 것들이지만....
뭐 이런것들 다 할줄 알아도 그래봐야 웹디 월급은 한달에 백만원이지만.. OTL
암튼, 이런 웹디를 무시하시는 발언은..... 곤란합니다. ㅠㅠㅠㅠㅠ
http://aremysitesup.com/
Css Tricks 의 Chris Coyier, 유명한 웹디 죠. 이 사이트 Christ Coyier 가 만든 사이트 입니다.
http://fuelyourcoding.com/files/chriscoyierimg.jpg
nodeJs 기반이고, 제작년에 기술혁신상을 받기도 했습니다.
(웹디들은 php 가 어려우니, jQuery 를 nodeJS 서버에 올려서 jQuery 를 서버쪽에서 돌리는 사이트를 구축하는 방법을 많이 택합니다.)
웹디라고 jQuery 도 못하고, php 도 못한다고 단정짓는 건 좀 아닌 것 같습니다.
jQuery 같은 경우, 오히려 웹디들은 css 에 대한 정확한 이해를 갖고 있기 때문에 프로그래머들보다 더 멋진 css + jQuery 조합을 만들어 낼수도 있습니다. jQuery API 들 보면 웹디들이 만들어낸 API 가 숫자적으로 훨씬 더 많습니다.
프로그래머들이 간단간단한 html, css 는 먹여줄 수 있듯이, 웹디도 간단간단한 php 는 먹여줄수 있거든요. if else, header redirect 같은 단순한 것들이지만....
뭐 이런것들 다 할줄 알아도 그래봐야 웹디 월급은 한달에 백만원이지만.. OTL
암튼, 이런 웹디를 무시하시는 발언은..... 곤란합니다. ㅠㅠㅠㅠㅠ
기분 상하셨다면 죄송하구요.
저도 웹디입니다. 그것도 경력이 별로 없는...
웹에이전시 같은데는 웹디가 편집디자인처럼 웹시안만 작성하는데 전문적으로 파트가 정해진곳이 많아서 그런 말씀 드린겁니다.
그리고 웹규격,html,css,등 기본적인 수준에서 스크립트는 퍼블리셔가 담당하고
나머지 프로그램언어부분에서 서버사이드언어(php, asp, jsp...)와 DB 컨넥션 부분은 웹개발자가 맞는 그런 시스템에서 말씀드린겁니다.
말씀 하신 웹디분중에서도 이것 저것 손대시는분 많죠.
그러나 어디 까지나 전문 파트별로 전문적인 작업에서 말씀드리는것이니 오해 마세요.
위에서 쓰이는 jquery plugin 과 jquery library 소스는
DB와 연개된 것이 아닌 ul li 에 맞춰진 wSlide jquery Library 소스와
<img> 이미지를 슬라이드 처리해주는 jquery 소스입니다.
http://jquery.com/ 에서 찾아보시면 <img>부분을 처리해주는 소스가 있습니다.
그러나 wSlide jquery Library 소스는 인터넷으로 검색 하시면 찾으실수있습니다.
저도 그 작업을 하고있으나 jquery에 대한 스킬 부족으로 2달째 헤매는 중이입니다.
물론 쉽게 하면 할수있겠지만 실력이 없는데 너무 쉽게할려면 허접해져 버리기에..
이것 저것 궁상 떨다 시간 지나가고있습니다.
저도 웹디입니다. 그것도 경력이 별로 없는...
웹에이전시 같은데는 웹디가 편집디자인처럼 웹시안만 작성하는데 전문적으로 파트가 정해진곳이 많아서 그런 말씀 드린겁니다.
그리고 웹규격,html,css,등 기본적인 수준에서 스크립트는 퍼블리셔가 담당하고
나머지 프로그램언어부분에서 서버사이드언어(php, asp, jsp...)와 DB 컨넥션 부분은 웹개발자가 맞는 그런 시스템에서 말씀드린겁니다.
말씀 하신 웹디분중에서도 이것 저것 손대시는분 많죠.
그러나 어디 까지나 전문 파트별로 전문적인 작업에서 말씀드리는것이니 오해 마세요.
위에서 쓰이는 jquery plugin 과 jquery library 소스는
DB와 연개된 것이 아닌 ul li 에 맞춰진 wSlide jquery Library 소스와
<img> 이미지를 슬라이드 처리해주는 jquery 소스입니다.
http://jquery.com/ 에서 찾아보시면 <img>부분을 처리해주는 소스가 있습니다.
그러나 wSlide jquery Library 소스는 인터넷으로 검색 하시면 찾으실수있습니다.
저도 그 작업을 하고있으나 jquery에 대한 스킬 부족으로 2달째 헤매는 중이입니다.
물론 쉽게 하면 할수있겠지만 실력이 없는데 너무 쉽게할려면 허접해져 버리기에..
이것 저것 궁상 떨다 시간 지나가고있습니다.
네. 저도 한국은 퍼블리셔라는 직업군이 따로 있는 것을 알고 있습니다.
반면 미국은 어느 shop 이나 직장에도 그래픽 디자이너 와 웹디자이너가 별도로 있고, 퍼블리셔라는 사람은 없습니다. (조금 조그만 규모의 개발팀은 그래픽 디자이너가 따로 없기도 합니다. 그런 경우에는 그래픽은 외주 (out-source) 합니다.
그리고 프로그래머는 front-end 프로그래머 (싸가지 없는 젊은 친구들), back-end 프로그래머 (서버 만지는 아저씨) 요렇게 됩니다. ㅋㅋㅋ
어떤데는 sys admin 이라고 서버를 관리만 하는 position 이 따로 있기도 하고....
그래서 한국을 제외한 미국이나 일본, 다른 모든 나라들은 웹디의 영역이 한국에 비해 상당히 넓습니다. 최소 html, css, jQuery 까지가 확실하게 웹디 영역이고, 약간의 php 까지 할줄 알아야 하거든요.
물론 front-end 프로그래머들 역시, 약간의 css, 또 jQuery 에서도 프로그래밍 영역에 속하는 ajax 는 프로그래머가 담당하기도 하죠. (사실 할줄 아는게 여기서 서로 약간씩 겹칩니다. 왠만한 웹디들도 jQuery ajax 는 할 줄 아니까.)
그래서 웹디는 아무것도 모르는 사람들, 무조건 깔보는 경향이 싫은 것 뿐 입니다. :D
그렇지 않아도 서럽잖아요. 일은 제일 많이 하면서도 월급은 제일 낮은데.. 한국은 한달 월급 백만원이랍니다. ㅋㅋㅋ
(미국은 대략 시간당 25불 (2만 5천원) 인데, 어떻게 해서든 front-end 프로그래머 position 에 취직되면 그나마 시급이 시간당 35불 선으로 올라가긴 합니다.)
반면 미국은 어느 shop 이나 직장에도 그래픽 디자이너 와 웹디자이너가 별도로 있고, 퍼블리셔라는 사람은 없습니다. (조금 조그만 규모의 개발팀은 그래픽 디자이너가 따로 없기도 합니다. 그런 경우에는 그래픽은 외주 (out-source) 합니다.
그리고 프로그래머는 front-end 프로그래머 (싸가지 없는 젊은 친구들), back-end 프로그래머 (서버 만지는 아저씨) 요렇게 됩니다. ㅋㅋㅋ
어떤데는 sys admin 이라고 서버를 관리만 하는 position 이 따로 있기도 하고....
그래서 한국을 제외한 미국이나 일본, 다른 모든 나라들은 웹디의 영역이 한국에 비해 상당히 넓습니다. 최소 html, css, jQuery 까지가 확실하게 웹디 영역이고, 약간의 php 까지 할줄 알아야 하거든요.
물론 front-end 프로그래머들 역시, 약간의 css, 또 jQuery 에서도 프로그래밍 영역에 속하는 ajax 는 프로그래머가 담당하기도 하죠. (사실 할줄 아는게 여기서 서로 약간씩 겹칩니다. 왠만한 웹디들도 jQuery ajax 는 할 줄 아니까.)
그래서 웹디는 아무것도 모르는 사람들, 무조건 깔보는 경향이 싫은 것 뿐 입니다. :D
그렇지 않아도 서럽잖아요. 일은 제일 많이 하면서도 월급은 제일 낮은데.. 한국은 한달 월급 백만원이랍니다. ㅋㅋㅋ
(미국은 대략 시간당 25불 (2만 5천원) 인데, 어떻게 해서든 front-end 프로그래머 position 에 취직되면 그나마 시급이 시간당 35불 선으로 올라가긴 합니다.)
'그래야 이미지와 영상 소스를 붙이고 그런 효과를 볼수있져.'라는 부분에 지적하고싶네요.
반드시 제이쿼리로만 구현이 가능한것은 아닙니다만ㅇㅅㅇ;
제이쿼리없이도 구현은 가능합니다.
제이쿼리도 애초에 자바스크립트로 맹글어진 API구조입니다.
반드시 제이쿼리로만 구현이 가능한것은 아닙니다만ㅇㅅㅇ;
제이쿼리없이도 구현은 가능합니다.
제이쿼리도 애초에 자바스크립트로 맹글어진 API구조입니다.
헉.. 근데 두달씩이요? 저는 반나절 만에 해결 안나면 여기가서 해결봅니다.
http://stackoverflow.com/
다른 사람들 (나보다 실력이 떨어지는 사람들) 답변을 성실하게 해주면, 나의 reputation (계급) 이 많이 오르고, 내 reputation 이 많이 오르면, 제 질문도 더 많은 고수들이 잘 대답해주는, 그런 구조 입니다.
이 사이트는 너무나도 많은 프로그래머들, 웹디, 개발자들에게 유익한 사이트라 (이 사이트를 통해서 업무진행도 빨리 빨리되고, 기술/스킬도 엄청나게 빨리 익히게 되니까, 이 사이트 이용하면 내공이 장난아니게 늘죠.) 미국 IT 기업들이 후원하는 사이트 입니다.
한국도 이런 대기업이 후원해주는 사이트가 하나 생기면, 참 좋겠더라구요.
http://stackoverflow.com/
다른 사람들 (나보다 실력이 떨어지는 사람들) 답변을 성실하게 해주면, 나의 reputation (계급) 이 많이 오르고, 내 reputation 이 많이 오르면, 제 질문도 더 많은 고수들이 잘 대답해주는, 그런 구조 입니다.
이 사이트는 너무나도 많은 프로그래머들, 웹디, 개발자들에게 유익한 사이트라 (이 사이트를 통해서 업무진행도 빨리 빨리되고, 기술/스킬도 엄청나게 빨리 익히게 되니까, 이 사이트 이용하면 내공이 장난아니게 늘죠.) 미국 IT 기업들이 후원하는 사이트 입니다.
한국도 이런 대기업이 후원해주는 사이트가 하나 생기면, 참 좋겠더라구요.
