개발자 도담씨

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋 요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다. 예를 들면 LG그룹 홈페이지나, 스타벅스만 봐도 알 수 있다. 아래는 자바스크립트 코드다 :D /*스크롤에 반응하는 박스*/ $("#page .page_event_box").each(function(){ var box_offset=$(this).offset(); var box_top=box_offset.top; //if(window_scroll_top+window_height-50>box_top){$(this).addClass("active");} if(window_scroll_top=box_top){$(this).addClass("active");} //else $(th..

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 이전 슬라이드 배너에서는 플러그인을 사용했었는데 사용하다보니 문제점이 하나 있었다! 반응형이 안되던것... 처음 웹 브라우저의 크기를 인식해서 되는 것 같았다. 😓그래서 책을 보고 우선 반응형으로 만들어보고 슬라이드 애니메이션을 추가해 보았다. ① 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환② 전환 시간 설정 가능③ 이미지 무한 롤링④ 함수 활용 html + css 부분123456789101112131415161718192021222324252627282930313233343536373839 banner body{ margin: 0px; } #banner{ width: 100%; height..

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !인터넷엔 많은 정보가 있다 ㅎ3ㅎ원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚 첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.참고 : https://codepen.io/andreasstorm/pen/gKGbxo webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD 위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.box-sizing: border-box;해당 속성을 지정하면 해..

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 )2편 - [Web Programming] - CSS 속성 2편 ( display + 배경 속성 )3편 - [Web Programming] - CSS속성 3편 ( 글자 + 위치 속성 )4편 - [Web Programming] - CSS 속성 4편 마지막 ( float + 그림자 + 그레이디언트 속성 ) 지난 4편에 걸처 CSS 속성을 포스팅 해봤다.크게 어렵지는 않지만 내용이 많아 길게 느껴졌던 것 같다.이어서 CSS 응용과 레이아웃 편을 적을려 했지만 그전에 먼저 로그인 화면과 회원가입 화면을 만든 것이 있어서 이를 예제로 복습겸 다른 추가사항들이 있어 공부해본 것들을 포스팅 해보겠다. : )우선 만들어본 화면이다. ..