반응형 jquery기초18 [ jquery 응용 ] 스크롤 시 상단 고정 메뉴 만들기 사이트를 제작하거나 컨텐츠를 제작할때 자주 사용되는 스크롤 할때 브라우저 상단에 고정되는 메뉴를 만들어 볼까 합니다. 최초부터 상단에 붙어 있는 메뉴도 있겠지만, 저는 중간에 고정이 될 메뉴가 있는 영역이 상단에 붙으면 그때부터 고정되어 같이 내려오는 형태로 제작을 해보려 합니다. HTML 코드 스크롤 상단 메뉴 고정하기 menu 1 menu 2 menu 3 menu 4 스크롤 영역 html 코드는 우선 페이지에 대한 구조를 설정합니다. 상단에는 header라는 클래스를 가진 영역에 텍스트가 있고, 그 밑에 tabs라는 div영역을 메뉴라고 생각하고 해당 영역을 스크롤 시 고정되는 영역으로 만들어 보려합니다. 그리고 contents라는 영역은 충분한 스크롤이 가능하게끔 height값을 만들어주기 위한 영.. 2024. 3. 15. [ jquery 응용 ] scrollTop animate 버튼 구현하기(Top버튼) 우측 하단 '위로 가기' 버튼 (Top버튼) 모바일이나 다른 사이트에서 자주 보이는 탑버튼은 어떻게 구현될까요? 요즘 스크롤을 많이 사용하는 사이트들이 많기도 하고 모바일에서 물론 상단으로 이동하는 기능들이 기종/브라우저 별로 가지고 있지만 사이트의 편리 기능으로 아직까지 많이 사용하는 기능입니다. 단순하게 버튼을 누르면 짠(!) 하고 바로 위로 이동하는 앵커형태로 사용할 수 도 있지만, 정적인것보단 약간의 애니메이션 효과를 추가하여 최상단 일때는 불필요하기에 감추고, 스크롤을 시작하면 버튼을 보여주고, 눌렀을때는 최상단까지 스르륵 올라가도록 구현해 보겠습니다. HTML 코드 위로 우선 내용은 없지만 전체를 감싸는 'container'라는 클래스로 객체를 만들고, 그 안에 'topBtn' 이라는 아이디를.. 2024. 3. 14. [ jquery 기초 ] jquery ajax | Ajax란? Asynchronous JavaScript and XML 의 약자 자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다. 꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미. | .ajax(settings) jQuery를 이용한 ajax통신의 가장 기본적인 API 주요속성 data : 서버에 전송할 데이터, key/value 형식의 객체 dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) type : 서버로 전송하는 데이터의 타입 (POST, GET) url : 데이터를 전송할 URL .. 2019. 10. 13. [ jquery 기초 ] jquery Animation - 애니메이션 | 효과란? 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다. jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다. 예제1) - https://jsfiddle.net/sunghun/8nt17wdk/3/ target 예제2) - https://jsfiddle.net/sunghun/8nt17wdk/4/ » Run Hello! 2019. 10. 12. [ jquery 기초 ] jquery Event - 고급 메서드 .live() .live( eventType, handler ) .live( eventType, eventData, handler ) .live( events ) live() 메서드의 경우 원래는 jQuery의 플러그인으로 개발되어 사용이 되었으나, 너무나 좋은 기능 때문인지 “1.3” 이후 버전의 jQuery에는 기본 기능으로 추가 되었습니다. .click(), .bind() 와 같은 이벤트 메서드에서는 이미 로드가 완료된 개체에 이벤트를 주었다면, .live() 메서드의 경우 동적으로 생성될 개체나 요소에 대해서도 이벤트를 맵핑 할 수 있습니다. $(“a”).click(function() { alert(‘click a’); }); 의 경우 HTML 문서에 존재하는 “a”요소를 찾아 마우스 클릭 이벤트.. 2019. 10. 11. [ jquery 기초 ] jquery Event - bind() 메서드 .bind() .bind( eventType, [ eventData ], handler(eventObject) ) .bind( eventType, [ eventData ], false ) .bind( events ) .bind() 메서드는 말 그대로 개체와 이벤트를 묶어주는 역할을 합니다. 앞의 이벤트 메서드의 경우 직접 이벤트를 호출 하지만, .bind() 메서드는 파라미터의 값으로 이름을 넣음으로써 해당 이벤트를 체크하게 됩니다. $(“div”).click(function() { alert(‘click’); } $(“div”).bind(‘click’, function() { alert(‘bind click’); } 두 메서드의 차이점 보이시나요? .click() 메서드의 직접호출이 아닌 해당 이벤트의.. 2019. 10. 10. [ jquery 기초 ] jquery Event - 이벤트 지원 메서드 | 이벤트란? 시스템에서 일어나는 사건을 의미 Javascript나 jquery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스이동, 타이핑, 페이지 로딩 등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. 이벤트에 대한 기본적인 내용은 자바스크립트 이벤트 편 참고 http://opentutorials.org/course/49 jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다. jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다... 2019. 10. 9. [ jquery 기초 ] jquery FORM API - 폼을 위한 API | 폼이란? 서버로 데이터를 전송하기 위한 수단 Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다. jQuery 폼 API 문서 : http://api.jquery.com/category/forms/ | 폼(form)을 위한 API 웹 프로그램에서 Form은 매우 중요한 요소입니다. 사용자의 데이터를 서버로 전송을 하는 막중한 임무를 뛰고 있습니다. ASP.NET에서는 단일 폼의 형태로 구성이 되어 있었으며, 많은 부분이 Form에 대해 크게 신경을 쓰지 않아도 되는 부분이 있었습니다. 하지만 ASP.NET MVC가 나오면서 상황은 바뀌었습니다. ASP, PHP 처럼 Form을 직접적으로 컨트롤 하고, 다중 폼을 이용한 프로그래밍이 쉬워졌기 때문입니다. 물론 ASP.NET도 Form을 통한 .. 2019. 10. 8. [ jquery 기초 ] jquery Attribute - 속성 관련 메서드 | HTML 문서의 속성, 엘리먼트 제어하기 - http://api.jquery.com/category/manipulation/ .attr() 요소의 속성값을 가져오기 위해서는 .attr(attributeName)을 사용하며, 속성값을 설정하기 위해서는 .attr(attributeName, value)를 사용하면 됩니다. .removeAttr() removeAttr( attributeName ) 선택된 개체의 속성값을 제거 할 수 있습니다. .val() 선택된 요소의 값을 가져옵니다. jQuery 에서 셀렉터 다음으로 가장 많이 사용되는 메서드가 아닌가 싶습니다. Input, select 등의 요소에서 value에 해당하는 값을 가져오거나 설정하며, 자바스크립트의 document.getElementByI.. 2019. 10. 7. 이전 1 2 다음 반응형
