FrontEnd/JQuery (3) 썸네일형 리스트형 [JQuery] Tab 메뉴 만들기 아래와 같이 Tab메뉴를 만들고 , 버튼을 눌러 Tab메뉴와 내용이 넘어가도록 기능을 구현해보았다. tab메뉴와 Content 생성 MENU1 MENU2 MENU3 MENU4 MENU5 Content1 Content2 Content3 Content4 Content5 이전, 다음버튼을 만들어 주고 Tab 메뉴 리스트와 그에 대한 내용을 만들었다. 이때 Menu1과 Content1에만 on클래스를 주었다. on 클래스는 삭제와 동시에 다른 Menu, Content에 생성되도록 기능을 부여할 것이다. 기본 틀, 제목, 내용 스타일 /* 기본 틀, 제목, 내용 스타일 */ ul { list-style: none; padding: 0px; } #container { width: 700px; height: .. [JQuery] 네비게이션바 상단 고정 기능 웹 브라우저에서 스크롤을 내려도 네비게이션바가 상단에 고정되어 따라내려오는 기능을 구현해보자 먼저, 아래의 코드를 이용해 퀵메뉴와 네비를 생성 하고, 스타일을 지정해주었다. (네비가 상단에 고정되어있는 것을 한 눈에 보기위해 바디 구역을 구분하여 백그라운드 컬러를 지정했다.) MENU1 MENU2 MENU3 MENU4 body1 body2 body3 이번엔 제이쿼리를 이용하여 상단 네비 고정 기능을 구현했다. //네비 고정 기능 구현 $(document).ready(function(){} : 문서가 다 띄워질때까지 기능이 실행되지 않고 기다림 - 브라우저가 실행 되기 전 기능이 실행되면 구현이 이상해질 수 있기 때문 $(window).on('scroll',function(){}) :scroll 기능 사용.. [JQuery] JQuery 기본개념 제이쿼리(jQuery) 제이쿼리는 자바스크립트 언어를 간편하게 사용하기 위해 단순화시킨 오픈 소스 기반 자바스크립트 라이브러리다. JQuery 장점 1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능하다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다. 3. 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있다. 4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다. 5. 다양한 플러그인과 참고 문서가 많이 존재한다. 6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다. 제이쿼리 사용 방법 헤드에 다음과 같은 오픈소스를 입력한다. 제이쿼리 문법 $(선택자).동작함수(); $ - 제이쿼리에 접근할 수 있.. 이전 1 다음
