html (63) 썸네일형 리스트형 HTML - API 사용하기 ( 구글맵API , Marker icon 변경 ) API - 외부 모듈을 연결 구글맵 API를 사용하여 맵을 불러오고, Marker(마커) 아이콘, 속성 등을 바꾸는 법 작동원리는 주석에 달아놨고, 다음에 더 정리해서 축약하고, CSS와 JS , HTML을 분리한 뒤 정리된 코드를 다시 올리겠다. 이용한 출처 좌표 검색기 : https://map.yjhoon.com/naver/ 무료 아이콘 링크 : https://icon-icons.com/ko/ 구글맵 API : https://mapsplatform.google.com/ 여기서 중요한것은 API에서 Key값을 받아서 script에 추가해주어야한다. YourKey에 자신의 키값을 넣자 코드가 길어 수행결과 먼저 보여주겠다. 지도 중심 이동-1 지도 중심 이동-2 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 사용 ) 게임시작! 이전 1 2 3 4 5 6 7 8 다음
