개발자노트/웹 (74) 썸네일형 리스트형 HTML - jQuery를 이용한 toggle() 예제 ( 사진 열기 ) 이번엔 class를 따로 지정하지 않고 ID만으로 toggle 시키는 예제이다. 버튼 이미지인 box은 기본적으로 display: none; 상태로 설정되어있는데 toggle()을 통해 display 되도록 한다. 이곳에서 button:eq()는 버튼이 여러개 있을 때 몇 번 째 버튼인지 알려주기 위함이고, toggle("fast")는 투글이 활성화 되어서 display가 되는 속도를 조절하는 것이다. slow로 하게 된다면 천천히 디스플레이된다. 수행결과 HTML - jQuery를 이용한 toggleClass("on") 예제 액션1 액션2 액션3 toggleClass를 사용해 box 에 on class를 추가하면 위에 스타일이 적용되어 폼이 변경되는 방식 수행결과 버튼 1 : 왼쪽 주황박스 버튼 2 : 오른쪽 파랑박스 버튼 3: 두개 동시 조작 HTML - 마우스 이벤트 마우스오버 마우스엔터 결과 HTML - 광고배너 / 갤러리 등에 사용되는 예제 광고 혹은 사진들을 다음 / 이전 으로 넘겨가면서 볼 수 있게 해주는 기능 / 다음 HTML - 아코디언 메뉴 예제 메뉴1 메뉴1-1 메뉴1-1-1 메뉴1-1-2 메뉴1-2 메뉴1-2-1 메뉴1-2-2 메뉴1-3 메뉴1-3-1 메뉴1-3-2 메뉴2 메뉴2-1 메뉴2-2 메뉴2-3 메뉴3 메뉴3-1 메뉴3-2 메뉴3-3 HTML - jQuery 라이브러리 연결 방법 2가지 ( 직접연결 , CDN ) 1. 직접연결 방법 webapp 폴더에 같은 레벨로 js 폴더를 생성 후 스크립트 경로를 js/jquery-3.6.0.min.js로 body에 지정해줌 다운 받는 링크 : https://jquery.com/ 여기서 주의할 점은 Download the compressed, production jQuery 3.6.0 을 다운받아야한다. (compressed) 이 때 크롬으로 접속하게 되면 다운이 되지 않고 코드들이 바로 나오는데 복사해서 js 파일을 직접 만들고 내용에 붙여넣기 하면 된다. 그게 싫으면 https://releases.jquery.com/ 이 링크에 들어가 CDN으로 연결하는 방법이 있는데 여기서도 uncompressed가 아닌 minified를 눌러 이러한 스크립트를 HTML Body에 추가.. HTML - 주사위게임 ( setTimeout 사용 ) 게임시작! HTML - 선택자와 콜백함수를 이용한 이벤트 예제 ( 주사위 게임 ) 주사위게임 굴리기! Player COM CSS ( Script ) 설명 주사위의 눈은 1~6이기 때문에 random을 * 6+1로 지정, floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다는 특징이 있어 random을 할 때 사용 기존에 body에 있던 내용을 수정하기 위해 document.선택자를 사용 기본 body에 있던 img는 움짤인 gif로 실행됨 그 후 random으로 나온 값에 따라 랜덤값.png 파일로 대체시킨다. ( 주사위의 눈이 1이면 1.png ) 상단에 Title 역시 player와 com 의 값에 따라 무,승,패로 대체된다. 수행결과 이전 1 ··· 3 4 5 6 7 8 9 10 다음
